<!DOCTYPE html><html class=split lang=en-US-x-hixie><script src=../link-fixup.js defer=""></script>
<!-- Mirrored from html.spec.whatwg.org/dev/scripting.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 10 Sep 2025 08:36:26 GMT -->
<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=utf-8" /><!-- /Added by HTTrack -->
<meta charset=utf-8><meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name=viewport><title>HTML Standard, Edition for Web Developers</title><meta content=#3c790a name=theme-color><meta content="light dark" name=color-scheme><link rel=stylesheet href=../../resources.whatwg.org/standard-shared-with-dev.css crossorigin=""><link rel=icon href=https://resources.whatwg.org/logo.svg crossorigin=""><link rel=stylesheet href=styles.css crossorigin=""><script>
   function toggleStatus(div) {
     div.parentNode.classList.toggle('wrapped');
   }
   function setLinkFragment(link) {
     link.hash = location.hash;
   }
  </script><body>
  <script async="" src=search.js></script>
  
  
  <header id=head class="head with-buttons">
   <a href=https://whatwg.org/ class=logo><img width=100 alt=WHATWG crossorigin="" class=darkmode-aware src=https://resources.whatwg.org/logo.svg height=100></a>
   
   <hgroup><h1><a rel=home href=index.html>HTML: The Living Standard</a></h1><p id=dev-edition-h2>Edition for Web Developers — Last Updated <span class=pubdate>10 September 2025</span></hgroup>
   

   <div id=search>
    <input placeholder="Search. Press '/'" autocomplete=off name=query id=query type=search>
    <ol id=results></ol>
   </div>
  </header>

  

  

  

  
  

  
  

  

  <nav><a href=interactive-elements.html>← 4.11 Interactive elements</a> — <a href=index.html>Table of Contents</a> — <a href=canvas.html>4.12.5 The canvas element →</a></nav><ol class=toc><li><ol><li><a href=scripting.html#scripting-3><span class=secno>4.12</span> Scripting</a><ol><li><a href=scripting.html#the-script-element><span class=secno>4.12.1</span> The <code>script</code> element</a><ol><li><a href=scripting.html#scriptingLanguages><span class=secno>4.12.1.1</span> Scripting languages</a><li><a href=scripting.html#restrictions-for-contents-of-script-elements><span class=secno>4.12.1.2</span> Restrictions for contents of <code>script</code> elements</a><li><a href=scripting.html#inline-documentation-for-external-scripts><span class=secno>4.12.1.3</span> Inline documentation for external scripts</a></ol><li><a href=scripting.html#the-noscript-element><span class=secno>4.12.2</span> The <code>noscript</code> element</a><li><a href=scripting.html#the-template-element><span class=secno>4.12.3</span> The <code>template</code> element</a><li><a href=scripting.html#the-slot-element><span class=secno>4.12.4</span> The <code>slot</code> element</a></ol></ol></ol><h3 id=scripting-3><span class=secno>4.12</span> Scripting<a href=#scripting-3 class=self-link></a></h3>

  <p>Scripts allow authors to add interactivity to their documents.</p>

  <p>Authors are encouraged to use declarative alternatives to scripting where possible, as
  declarative mechanisms are often more maintainable, and many users disable scripting.</p>

  <div class=example>

   <p>For example, instead of using a script to show or hide a section to show more details, the
   <code id=scripting-3:the-details-element><a href=interactive-elements.html#the-details-element>details</a></code> element could be used.</p>

  </div>

  <p>Authors are also encouraged to make their applications degrade gracefully in the absence of
  scripting support.</p>

  <div class=example>

   <p>For example, if an author provides a link in a table header to dynamically resort the table,
   the link could also be made to function without scripts by requesting the sorted table from the
   server.</p>

  </div>


  <h4 id=the-script-element><span class=secno>4.12.1</span> The <dfn id=script data-dfn-type=element><code>script</code></dfn> element<a href=#the-script-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script title="The <script> HTML element is used to embed executable code or data; this is typically used to embed or refer to JavaScript code. The <script> element can also be used with other languages, such as WebGL's GLSL shader programming language and JSON.">Element/script</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>3+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android yes"><span>Firefox Android</span><span>4+</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div>

  <dl class=element><dt><a href=dom.html#concept-element-categories id=the-script-element:concept-element-categories>Categories</a>:<dd><a id=the-script-element:metadata-content-2 href=dom.html#metadata-content-2>Metadata content</a>.<dd><a id=the-script-element:flow-content-2 href=dom.html#flow-content-2>Flow content</a>.<dd><a id=the-script-element:phrasing-content-2 href=dom.html#phrasing-content-2>Phrasing content</a>.<dd><a href=dom.html#script-supporting-elements-2 id=the-script-element:script-supporting-elements-2>Script-supporting element</a>.<dt><a href=dom.html#concept-element-contexts id=the-script-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>Where <a id=the-script-element:metadata-content-2-2 href=dom.html#metadata-content-2>metadata content</a> is expected.<dd>Where <a id=the-script-element:phrasing-content-2-2 href=dom.html#phrasing-content-2>phrasing content</a> is expected.<dd>Where <a id=the-script-element:script-supporting-elements-2-2 href=dom.html#script-supporting-elements-2>script-supporting elements</a> are expected.<dt><a href=dom.html#concept-element-content-model id=the-script-element:concept-element-content-model>Content model</a>:<dd>If there is no <code id=the-script-element:attr-script-src><a href=#attr-script-src>src</a></code>
   attribute, depends on the value of the <code id=the-script-element:attr-script-type><a href=#attr-script-type>type</a></code> attribute, but must match
   <a href=#restrictions-for-contents-of-script-elements id=the-script-element:restrictions-for-contents-of-script-elements>script content restrictions</a>.<dd>If there <em>is</em> a <code id=the-script-element:attr-script-src-2><a href=#attr-script-src>src</a></code>
   attribute, the element must be either empty or contain only
   <a href=#inline-documentation-for-external-scripts id=the-script-element:inline-documentation-for-external-scripts>script documentation</a> that also matches <a href=#restrictions-for-contents-of-script-elements id=the-script-element:restrictions-for-contents-of-script-elements-2>script
   content restrictions</a>.<dt><a href=dom.html#concept-element-tag-omission id=the-script-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>Neither tag is omissible.<dt><a href=dom.html#concept-element-attributes id=the-script-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-script-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dd><code id=the-script-element:attr-script-type-2><a href=#attr-script-type>type</a></code> —  Type of script
     <dd><code id=the-script-element:attr-script-src-3><a href=#attr-script-src>src</a></code> —  Address of the resource
     <dd><code id=the-script-element:attr-script-nomodule><a href=#attr-script-nomodule>nomodule</a></code> —  Prevents execution in user agents that support <span>module scripts</span>
     <dd><code id=the-script-element:attr-script-async><a href=#attr-script-async>async</a></code> —  Execute script when available, without blocking while fetching
     <dd><code id=the-script-element:attr-script-defer><a href=#attr-script-defer>defer</a></code> —  Defer script execution
     <dd><code id=the-script-element:attr-script-blocking><a href=#attr-script-blocking>blocking</a></code> —  Whether the element is <a id=the-script-element:potentially-render-blocking href=urls-and-fetching.html#potentially-render-blocking>potentially render-blocking</a>
     <dd><code id=the-script-element:attr-script-crossorigin><a href=#attr-script-crossorigin>crossorigin</a></code> —  How the element handles crossorigin requests
     <dd><code id=the-script-element:attr-script-referrerpolicy><a href=#attr-script-referrerpolicy>referrerpolicy</a></code> —  <a id=the-script-element:referrer-policy href=https://w3c.github.io/webappsec-referrer-policy/#referrer-policy data-x-internal=referrer-policy>Referrer policy</a> for <a href=https://fetch.spec.whatwg.org/#concept-fetch id=the-script-element:concept-fetch data-x-internal=concept-fetch>fetches</a> initiated by the element
     <dd><code id=the-script-element:attr-script-integrity><a href=#attr-script-integrity>integrity</a></code> —  Integrity metadata used in <cite>Subresource Integrity</cite> checks <a href=references.html#refsSRI>[SRI]</a>
     <dd><code id=the-script-element:attr-script-fetchpriority><a href=#attr-script-fetchpriority>fetchpriority</a></code> —  Sets the <a href=https://fetch.spec.whatwg.org/#request-priority id=the-script-element:concept-request-priority data-x-internal=concept-request-priority>priority</a> for <a href=https://fetch.spec.whatwg.org/#concept-fetch id=the-script-element:concept-fetch-2 data-x-internal=concept-fetch>fetches</a> initiated by the element
     <dt><a href=dom.html#concept-element-accessibility-considerations id=the-script-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-script>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-script>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-script-element:concept-element-dom>DOM interface</a>:<dd>Uses <code>HTMLScriptElement</code>.</dl>

  <p>The <code id=the-script-element:the-script-element><a href=#the-script-element>script</a></code> element allows authors to include dynamic script, instructions to the
  user agent, and data blocks in their documents. The element does not <a href=dom.html#represents id=the-script-element:represents>represent</a> content for the user.</p>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-type title="The <script> HTML element is used to embed executable code or data; this is typically used to embed or refer to JavaScript code. The <script> element can also be used with other languages, such as WebGL's GLSL shader programming language and JSON.">Element/script#attr-type</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>≤4+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><p>The script element has two core attributes. The <dfn data-dfn-for=script id=attr-script-type data-dfn-type=element-attr><code>type</code></dfn> attribute allows customization of the type of script
  represented:</p>

  <ul><li><p>Omitting the attribute, setting it to the empty string, or setting it to a
    <a id=the-script-element:javascript-mime-type-essence-match href=https://mimesniff.spec.whatwg.org/#javascript-mime-type-essence-match data-x-internal=javascript-mime-type-essence-match>JavaScript MIME type essence match</a> means that the script is a <span>classic
    script</span>, to be interpreted according to the JavaScript <i id=the-script-element:js-prod-script><a data-x-internal=js-prod-script href=https://tc39.es/ecma262/#prod-Script>Script</a></i> top-level production. Authors should omit the <code id=the-script-element:attr-script-type-3><a href=#attr-script-type>type</a></code> attribute instead of redundantly setting it.<li><p>Setting the attribute to an <a id=the-script-element:ascii-case-insensitive href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a> match for "<code>module</code>" means that the script is a <span>JavaScript module script</span>, to
    be interpreted according to the JavaScript <i id=the-script-element:js-prod-module><a data-x-internal=js-prod-module href=https://tc39.es/ecma262/#prod-Module>Module</a></i> top-level
    production.<li><p>Setting the attribute to an <a id=the-script-element:ascii-case-insensitive-2 href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a> match for "<code>importmap</code>" means that the script is an <a id=the-script-element:import-map href=webappapis.html#import-map>import map</a>, containing
    JSON that will be used to control the behavior of <span>module specifier resolution</span>.<li><p>Setting the attribute to an <a id=the-script-element:ascii-case-insensitive-3 href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a> match for "<code>speculationrules</code>" means that the script defines a <a id=the-script-element:speculation-rule-set href=speculative-loading.html#speculation-rule-set>speculation rule
    set</a>, containing JSON that will be used to describe <a href=speculative-loading.html#speculative-loading>speculative loads</a>.<li>
     <p>Setting the attribute to any other value means that the script is a <dfn id=data-block>data block</dfn>,
     which is not processed by the user agent, but instead by author script or other tools. Authors
     must use a <a id=the-script-element:valid-mime-type-string href=https://mimesniff.spec.whatwg.org/#valid-mime-type data-x-internal=valid-mime-type-string>valid MIME type string</a> that is not a <a id=the-script-element:javascript-mime-type-essence-match-2 href=https://mimesniff.spec.whatwg.org/#javascript-mime-type-essence-match data-x-internal=javascript-mime-type-essence-match>JavaScript MIME type essence
     match</a> to denote data blocks.</p>

     <p class=note>The requirement that <a href=#data-block id=the-script-element:data-block>data blocks</a>
     must be denoted using a <a id=the-script-element:valid-mime-type-string-2 href=https://mimesniff.spec.whatwg.org/#valid-mime-type data-x-internal=valid-mime-type-string>valid MIME type string</a> is in place to
     avoid potential future collisions. Values for the <code id=the-script-element:attr-script-type-4><a href=#attr-script-type>type</a></code>
     attribute that are not MIME types, like "<code>module</code>" or "<code>importmap</code>", are used by the standard to denote types of scripts which have
     special behavior in user agents. By using a valid MIME type string now, you ensure that your
     data block will not ever be reinterpreted as a different script type, even in future user
     agents.</p>
    </ul>

  <p>The second core attribute is the <dfn data-dfn-for=script id=attr-script-src data-dfn-type=element-attr><code>src</code></dfn> attribute. It must only be specified for <span>classic scripts</span> and <span>JavaScript module scripts</span>, and denotes that instead of using the element's
  <a id=the-script-element:child-text-content href=https://dom.spec.whatwg.org/#concept-child-text-content data-x-internal=child-text-content>child text content</a> as the script content, the script will be fetched from the
  specified <a id=the-script-element:url href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a>. If <code id=the-script-element:attr-script-src-4><a href=#attr-script-src>src</a></code> is specified, it must be
  a <a id=the-script-element:valid-non-empty-url-potentially-surrounded-by-spaces href=urls-and-fetching.html#valid-non-empty-url-potentially-surrounded-by-spaces>valid non-empty URL potentially surrounded by spaces</a>.</p>

  <p>Which other attributes may be specified on a given <code id=the-script-element:the-script-element-2><a href=#the-script-element>script</a></code> element is determined by
  the following table:</p>

  <table class=yesno><thead><tr><th><th><code id=the-script-element:attr-script-nomodule-2><a href=#attr-script-nomodule>nomodule</a></code>
     <th><code id=the-script-element:attr-script-async-2><a href=#attr-script-async>async</a></code>
     <th><code id=the-script-element:attr-script-defer-2><a href=#attr-script-defer>defer</a></code>
     <th><code id=the-script-element:attr-script-blocking-2><a href=#attr-script-blocking>blocking</a></code>
     <th><code id=the-script-element:attr-script-crossorigin-2><a href=#attr-script-crossorigin>crossorigin</a></code>
     <th><code id=the-script-element:attr-script-referrerpolicy-2><a href=#attr-script-referrerpolicy>referrerpolicy</a></code>
     <th><code id=the-script-element:attr-script-integrity-2><a href=#attr-script-integrity>integrity</a></code>
     <th><code id=the-script-element:attr-script-fetchpriority-2><a href=#attr-script-fetchpriority>fetchpriority</a></code>
   <tbody><tr><th>External classic scripts<td class=yes>Yes<td class=yes>Yes<td class=yes>Yes<td class=yes>Yes<td class=yes>Yes<td class=yes>Yes<td class=yes>Yes<td class=yes>Yes<tr><th>Inline classic scripts<td class=yes>Yes<td class=no>·<td class=no>·<td class=no>·<td class=yes>Yes*<td class=yes>Yes*<td class=no>·<td class=no>·†<tr><th>External module scripts<td class=no>·<td class=yes>Yes<td class=no>·<td class=yes>Yes<td class=yes>Yes<td class=yes>Yes<td class=yes>Yes<td class=yes>Yes<tr><th>Inline module scripts<td class=no>·<td class=yes>Yes<td class=no>·<td class=no>·<td class=yes>Yes*<td class=yes>Yes*<td class=no>·<td class=no>·†<tr><th>Import maps<td class=no>·<td class=no>·<td class=no>·<td class=no>·<td class=no>·<td class=no>·<td class=no>·<td class=no>·<tr><th>Speculation rules<td class=no>·<td class=no>·<td class=no>·<td class=no>·<td class=no>·<td class=no>·<td class=no>·<td class=no>·<tr><th>Data blocks<td class=no>·<td class=no>·<td class=no>·<td class=no>·<td class=no>·<td class=no>·<td class=no>·<td class=no>·</table>

  <p class=tablenote><small>* Although inline scripts have no initial fetches, the <code id=the-script-element:attr-script-crossorigin-3><a href=#attr-script-crossorigin>crossorigin</a></code> and <code id=the-script-element:attr-script-referrerpolicy-3><a href=#attr-script-referrerpolicy>referrerpolicy</a></code> attribute on inline scripts affects the
  <a href=https://fetch.spec.whatwg.org/#concept-request-credentials-mode id=the-script-element:concept-request-credentials-mode data-x-internal=concept-request-credentials-mode>credentials mode</a> and <a id=the-script-element:referrer-policy-2 href=https://w3c.github.io/webappsec-referrer-policy/#referrer-policy data-x-internal=referrer-policy>referrer
  policy</a> used by module imports, including dynamic <code id=the-script-element:import()><a data-x-internal=import() href=https://tc39.es/ecma262/#sec-import-calls>import()</a></code>.</small></p>

  <p class=tablenote><small>† Unlike <code id=the-script-element:attr-script-crossorigin-4><a href=#attr-script-crossorigin>crossorigin</a></code> and <code id=the-script-element:attr-script-referrerpolicy-4><a href=#attr-script-referrerpolicy>referrerpolicy</a></code>, <code id=the-script-element:attr-script-fetchpriority-3><a href=#attr-script-fetchpriority>fetchpriority</a></code> does not affect module imports. See some discussion in <a href=https://github.com/whatwg/html/issues/10276>issue #10276</a>.</small></p>

  <hr>

  <p>The contents of inline <code id=the-script-element:the-script-element-3><a href=#the-script-element>script</a></code> elements, or the external script resource, must
  conform with the requirements of the JavaScript specification's <i id=the-script-element:js-prod-script-2><a data-x-internal=js-prod-script href=https://tc39.es/ecma262/#prod-Script>Script</a></i> or <i id=the-script-element:js-prod-module-2><a data-x-internal=js-prod-module href=https://tc39.es/ecma262/#prod-Module>Module</a></i> productions, for <span>classic scripts</span> and <span>JavaScript module scripts</span> respectively. <a href=references.html#refsJAVASCRIPT>[JAVASCRIPT]</a></p>

  <p>The contents of inline <code id=the-script-element:the-script-element-4><a href=#the-script-element>script</a></code> elements for <a href=webappapis.html#import-map id=the-script-element:import-map-2>import
  maps</a> must conform with the <a id=the-script-element:import-map-authoring-requirements href=webappapis.html#import-map-authoring-requirements>import map authoring requirements</a>.</p>

  <p>The contents of inline <code id=the-script-element:the-script-element-5><a href=#the-script-element>script</a></code> elements for <a href=speculative-loading.html#speculation-rule-set id=the-script-element:speculation-rule-set-2>speculation rule sets</a> must conform with the <a id=the-script-element:speculation-rule-set-authoring-requirements href=speculative-loading.html#speculation-rule-set-authoring-requirements>speculation rule set authoring
  requirements</a>.</p>

  <p>When used to include <a href=#data-block id=the-script-element:data-block-2>data blocks</a>, the data must be embedded
  inline, the format of the data must be given using the <code id=the-script-element:attr-script-type-5><a href=#attr-script-type>type</a></code>
  attribute, and the contents of the <code id=the-script-element:the-script-element-6><a href=#the-script-element>script</a></code> element must conform to the requirements
  defined for the format used.</p>

  <hr>

  <p>The <dfn data-dfn-for=script id=attr-script-nomodule data-dfn-type=element-attr><code>nomodule</code></dfn>
  attribute is a <a id=the-script-element:boolean-attribute href=common-microsyntaxes.html#boolean-attribute>boolean attribute</a> that prevents a script from being executed in user
  agents that support <span>module scripts</span>. This allows selective
  execution of <span>module scripts</span> in modern user agents and <span>classic scripts</span> in older user agents, <a href=#script-nomodule-example>as shown below</a>.</p>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-async title="The <script> HTML element is used to embed executable code or data; this is typically used to embed or refer to JavaScript code. The <script> element can also be used with other languages, such as WebGL's GLSL shader programming language and JSON.">Element/script#attr-async</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>≤4+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-defer title="The <script> HTML element is used to embed executable code or data; this is typically used to embed or refer to JavaScript code. The <script> element can also be used with other languages, such as WebGL's GLSL shader programming language and JSON.">Element/script#attr-defer</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.5+</span></span><span class="safari yes"><span>Safari</span><span>3+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android yes"><span>Firefox Android</span><span>4+</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><p>The <dfn data-dfn-for=script id=attr-script-async data-dfn-type=element-attr><code>async</code></dfn> and
  <dfn data-dfn-for=script id=attr-script-defer data-dfn-type=element-attr><code>defer</code></dfn> attributes are
  <a href=common-microsyntaxes.html#boolean-attribute id=the-script-element:boolean-attribute-2>boolean attributes</a> that indicate how the script should be
  evaluated. There are several possible modes that can be selected using these attributes, depending
  on the script's type.</p>

  <p>For external <span>classic scripts</span>, if the <code id=the-script-element:attr-script-async-3><a href=#attr-script-async>async</a></code> attribute is present, then the classic script will be
  fetched <span>in parallel</span> to parsing and evaluated as soon as it is available (potentially
  before parsing completes). If the <code id=the-script-element:attr-script-async-4><a href=#attr-script-async>async</a></code> attribute is not
  present but the <code id=the-script-element:attr-script-defer-3><a href=#attr-script-defer>defer</a></code> attribute is present, then the
  classic script will be fetched <span>in parallel</span> and evaluated when the page has finished
  parsing. If neither attribute is present, then the script is fetched and evaluated immediately,
  blocking parsing until these are both complete.</p>

  <p>For <span>module scripts</span>, if the <code id=the-script-element:attr-script-async-5><a href=#attr-script-async>async</a></code> attribute is present, then the module script and all its
  dependencies will be fetched <span>in parallel</span> to parsing, and the module script will
  be evaluated as soon as it is available (potentially before parsing completes). Otherwise, the
  module script and its dependencies will be fetched <span>in parallel</span> to parsing and
  evaluated when the page has finished parsing. (The <code id=the-script-element:attr-script-defer-4><a href=#attr-script-defer>defer</a></code>
  attribute has no effect on module scripts.)</p>

  <p>This is all summarized in the following schematic diagram:</p>

  <p><img style="width: 80%; min-width: 820px;" alt="With <script>, parsing is interrupted by fetching and execution. With <script defer>, fetching is parallel to parsing and execution takes place after all parsing has finished. And with <script async>, fetching is parallel to parsing but once it finishes parsing is interrupted to execute the script. The story for <script type=&quot;module&quot;> is similar to <script defer>, but the dependencies will be fetched as well, and the story for <script type=&quot;module&quot; async> is similar to <script async> with the extra dependency fetching." src=/images/asyncdefer.svg class=darkmode-aware></p>

  

  <p class=note>When inserted using the <code id=the-script-element:dom-document-write><a href=dynamic-markup-insertion.html#dom-document-write>document.write()</a></code>
  method, <code id=the-script-element:the-script-element-7><a href=#the-script-element>script</a></code> elements <a href=#document-written-scripts-intervention>usually</a>
  execute (typically blocking further script execution or HTML parsing). When inserted using the
  <code id=the-script-element:dom-element-innerhtml><a href=dynamic-markup-insertion.html#dom-element-innerhtml>innerHTML</a></code> and <code id=the-script-element:dom-element-outerhtml><a href=dynamic-markup-insertion.html#dom-element-outerhtml>outerHTML</a></code> attributes, they do not execute at all.</p>

  <p>The <code id=the-script-element:attr-script-defer-5><a href=#attr-script-defer>defer</a></code> attribute may be specified even if the <code id=the-script-element:attr-script-async-6><a href=#attr-script-async>async</a></code> attribute is specified, to cause legacy web browsers that
  only support <code id=the-script-element:attr-script-defer-6><a href=#attr-script-defer>defer</a></code> (and not <code id=the-script-element:attr-script-async-7><a href=#attr-script-async>async</a></code>) to fall back to the <code id=the-script-element:attr-script-defer-7><a href=#attr-script-defer>defer</a></code> behavior instead of the blocking behavior that
  is the default.</p>

  <p>The <dfn data-dfn-for=script id=attr-script-blocking data-dfn-type=element-attr><code>blocking</code></dfn>
  attribute is a <a id=the-script-element:blocking-attribute href=urls-and-fetching.html#blocking-attribute>blocking attribute</a>.</p>

  <p>The <dfn data-dfn-for=script id=attr-script-crossorigin data-dfn-type=element-attr><code>crossorigin</code></dfn> attribute is a <a id=the-script-element:cors-settings-attribute href=urls-and-fetching.html#cors-settings-attribute>CORS settings
  attribute</a>. For external <span>classic scripts</span>, it controls
  whether error information will be exposed, when the script is obtained from other <a href=browsers.html#concept-origin id=the-script-element:concept-origin>origins</a>. For external <span>module scripts</span>,
  it controls the <a href=https://fetch.spec.whatwg.org/#concept-request-credentials-mode id=the-script-element:concept-request-credentials-mode-2 data-x-internal=concept-request-credentials-mode>credentials mode</a> used for
  the initial fetch of the module source, if cross-origin. For both <span>classic</span> and <span>module scripts</span>, it controls the
  <a href=https://fetch.spec.whatwg.org/#concept-request-credentials-mode id=the-script-element:concept-request-credentials-mode-3 data-x-internal=concept-request-credentials-mode>credentials mode</a> used for cross-origin
  module imports.</p>

  <p class=note>Unlike <span>classic scripts</span>, <span>module scripts</span> require the use of the <a href=https://fetch.spec.whatwg.org/#http-cors-protocol id=the-script-element:cors-protocol data-x-internal=cors-protocol>CORS protocol</a> for cross-origin fetching.</p>

  <p>The <dfn data-dfn-for=script id=attr-script-referrerpolicy data-dfn-type=element-attr><code>referrerpolicy</code></dfn> attribute is a <a id=the-script-element:referrer-policy-attribute href=urls-and-fetching.html#referrer-policy-attribute>referrer
  policy attribute</a>. Its sets the <a id=the-script-element:referrer-policy-3 href=https://w3c.github.io/webappsec-referrer-policy/#referrer-policy data-x-internal=referrer-policy>referrer policy</a> used for the initial fetch of
  an external script, as well as the fetching of any imported module scripts.
  <a href=references.html#refsREFERRERPOLICY>[REFERRERPOLICY]</a></p>

  <div class=example>
   <p>An example of a <code id=the-script-element:the-script-element-8><a href=#the-script-element>script</a></code> element's referrer policy being used when fetching
   imported scripts but not other subresources:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>script</c-> <c- e>referrerpolicy</c-><c- o>=</c-><c- s>&quot;origin&quot;</c-><c- p>&gt;</c->
  fetch<c- p>(</c-><c- t>&apos;/api/data&apos;</c-><c- p>);</c->    <c- c1>// not fetched with &lt;script&gt;&apos;s referrer policy</c->
  <c- k>import</c-><c- p>(</c-><c- t>&apos;./utils.mjs&apos;</c-><c- p>);</c-> <c- c1>// is fetched with &lt;script&gt;&apos;s referrer policy (&quot;origin&quot; in this case)</c->
<c- p>&lt;/</c-><c- f>script</c-><c- p>&gt;</c-></code></pre>
  </div>

  <p>The <dfn data-dfn-for=script id=attr-script-integrity data-dfn-type=element-attr><code>integrity</code></dfn>
  attribute sets the <a href=https://fetch.spec.whatwg.org/#concept-request-integrity-metadata id=the-script-element:concept-request-integrity-metadata data-x-internal=concept-request-integrity-metadata>integrity metadata</a>
  used for the initial fetch of an external script. The value must match <a id=the-script-element:the-requirements-of-the-integrity-attribute href=https://w3c.github.io/webappsec-subresource-integrity/#the-integrity-attribute data-x-internal=the-requirements-of-the-integrity-attribute>the requirements of
  the integrity attribute</a>. <a href=references.html#refsSRI>[SRI]</a></p>

  <p>The <dfn data-dfn-for=script id=attr-script-fetchpriority data-dfn-type=element-attr><code>fetchpriority</code></dfn> attribute is a <a id=the-script-element:fetch-priority-attribute href=urls-and-fetching.html#fetch-priority-attribute>fetch priority
  attribute</a>. Its sets the <a href=https://fetch.spec.whatwg.org/#request-priority id=the-script-element:concept-request-priority-2 data-x-internal=concept-request-priority>priority</a> used for
  the initial fetch of an external script.</p>

  <p>Changing any of these attributes dynamically has no direct effect; these attributes are only
  used at specific times.</p>

  <hr>

  

  <dl class=domintro><dt><code><var>script</var>.<span id=dom-script-text>text</span> [ = <var>value</var> ]</code><dd>
    <p>Returns the <a id=the-script-element:child-text-content-2 href=https://dom.spec.whatwg.org/#concept-child-text-content data-x-internal=child-text-content>child text content</a> of the element.</p>
   <dt><code><var>script</var>.<a href=#dom-script-text id=the-script-element:dom-script-text>text</a> = <var>value</var></code><dd>
    <p>Replaces the element's children with the text given by <var>value</var>.</p>
   <dt><code><code>HTMLScriptElement</code>.<span id=dom-script-supports>supports</span>(<var>type</var>)</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLScriptElement/supports_static title="The supports() static method of the HTMLScriptElement interface provides a simple and consistent method to feature-detect what types of scripts are supported by the user agent.">HTMLScriptElement/supports_static</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>94+</span></span><span class="safari yes"><span>Safari</span><span>16+</span></span><span class="chrome yes"><span>Chrome</span><span>96+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>96+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><dd>
    <p>Returns true if the given <var>type</var> is a script type supported by the user agent. The
    possible script types in this specification are "<code>classic</code>", "<code>module</code>", and "<code>importmap</code>", but others might be added in
    the future.</p>
   </dl>

  

  <p class=note>The <var>type</var> argument has to exactly match these values; we do not
  perform an <a id=the-script-element:ascii-case-insensitive-4 href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a> match. This is different from how <code id=the-script-element:attr-script-type-6><a href=#attr-script-type>type</a></code> content attribute values are treated, and how
  <code id=the-script-element:domtokenlist><a data-x-internal=domtokenlist href=https://dom.spec.whatwg.org/#interface-domtokenlist>DOMTokenList</a></code>'s <code id=the-script-element:dom-domtokenlist-supports><a data-x-internal=dom-domtokenlist-supports href=https://dom.spec.whatwg.org/#dom-domtokenlist-supports>supports()</a></code> method
  works, but it aligns with the <code>WorkerType</code> enumeration used in the <code id=the-script-element:dom-worker><a href=workers.html#dom-worker>Worker()</a></code> constructor.</p>

  <hr>

  <div class=example>

   <p>In this example, two <code id=the-script-element:the-script-element-9><a href=#the-script-element>script</a></code> elements are used. One embeds an external
   <span>classic script</span>, and the other includes some data as a <a href=#data-block id=the-script-element:data-block-3>data block</a>.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>script</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;game-engine.js&quot;</c-><c- p>&gt;&lt;/</c-><c- f>script</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>script</c-> <c- e>type</c-><c- o>=</c-><c- s>&quot;text/x-game-map&quot;</c-><c- p>&gt;</c->
<c- p>........</c->U<c- p>.........</c->e
o<c- p>............</c->A<c- p>....</c->e
<c- p>.....</c->A<c- p>.....</c->AAA<c- p>....</c->e
<c- p>.</c->A<c- p>..</c->AAA<c- p>...</c->AAAAA<c- p>...</c->e
<c- p>&lt;/</c-><c- f>script</c-><c- p>&gt;</c-></code></pre>

   <p>The data in this case might be used by the script to generate the map of a video game. The
   data doesn't have to be used that way, though; maybe the map data is actually embedded in other
   parts of the page's markup, and the data block here is just used by the site's search engine to
   help users who are looking for particular features in their game maps.</p>

  </div>

  <div class=example>

   <p>The following sample shows how a <code id=the-script-element:the-script-element-10><a href=#the-script-element>script</a></code> element can be used to define a function
   that is then used by other parts of the document, as part of a <span>classic script</span>. It
   also shows how a <code id=the-script-element:the-script-element-11><a href=#the-script-element>script</a></code> element can be used to invoke script while the document is
   being parsed, in this case to initialize the form's output.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>script</c-><c- p>&gt;</c->
 <c- a>function</c-> calculate<c- p>(</c->form<c- p>)</c-> <c- p>{</c->
   <c- a>var</c-> price <c- o>=</c-> <c- mf>52000</c-><c- p>;</c->
   <c- k>if</c-> <c- p>(</c->form<c- p>.</c->elements<c- p>.</c->brakes<c- p>.</c->checked<c- p>)</c->
     price <c- o>+=</c-> <c- mf>1000</c-><c- p>;</c->
   <c- k>if</c-> <c- p>(</c->form<c- p>.</c->elements<c- p>.</c->radio<c- p>.</c->checked<c- p>)</c->
     price <c- o>+=</c-> <c- mf>2500</c-><c- p>;</c->
   <c- k>if</c-> <c- p>(</c->form<c- p>.</c->elements<c- p>.</c->turbo<c- p>.</c->checked<c- p>)</c->
     price <c- o>+=</c-> <c- mf>5000</c-><c- p>;</c->
   <c- k>if</c-> <c- p>(</c->form<c- p>.</c->elements<c- p>.</c->sticker<c- p>.</c->checked<c- p>)</c->
     price <c- o>+=</c-> <c- mf>250</c-><c- p>;</c->
   form<c- p>.</c->elements<c- p>.</c->result<c- p>.</c->value <c- o>=</c-> price<c- p>;</c->
 <c- p>}</c->
<c- p>&lt;/</c-><c- f>script</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>form</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;pricecalc&quot;</c-> <c- e>onsubmit</c-><c- o>=</c-><c- s>&quot;return false&quot;</c-> <c- e>onchange</c-><c- o>=</c-><c- s>&quot;calculate(this)&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>fieldset</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>legend</c-><c- p>&gt;</c->Work out the price of your car<c- p>&lt;/</c-><c- f>legend</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Base cost: £52000.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Select additional options:<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>ul</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>checkbox</c-> <c- e>name</c-><c- o>=</c-><c- s>brakes</c-><c- p>&gt;</c-> Ceramic brakes (£1000)<c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>li</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>checkbox</c-> <c- e>name</c-><c- o>=</c-><c- s>radio</c-><c- p>&gt;</c-> Satellite radio (£2500)<c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>li</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>checkbox</c-> <c- e>name</c-><c- o>=</c-><c- s>turbo</c-><c- p>&gt;</c-> Turbo charger (£5000)<c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>li</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>checkbox</c-> <c- e>name</c-><c- o>=</c-><c- s>sticker</c-><c- p>&gt;</c-> &quot;XZ&quot; sticker (£250)<c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>li</c-><c- p>&gt;</c->
  <c- p>&lt;/</c-><c- f>ul</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Total: £<c- p>&lt;</c-><c- f>output</c-> <c- e>name</c-><c- o>=</c-><c- s>result</c-><c- p>&gt;&lt;/</c-><c- f>output</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>fieldset</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>script</c-><c- p>&gt;</c->
  calculate<c- p>(</c->document<c- p>.</c->forms<c- p>.</c->pricecalc<c- p>);</c->
 <c- p>&lt;/</c-><c- f>script</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>form</c-><c- p>&gt;</c-></code></pre>

  </div>

  <div id=script-type-module-example-1 class=example><a href=#script-type-module-example-1 class=self-link></a>

   <p>The following sample shows how a <code id=the-script-element:the-script-element-12><a href=#the-script-element>script</a></code> element can be used to include an
   external <span>JavaScript module script</span>.

   <pre><code class='html'><c- p>&lt;</c-><c- f>script</c-> <c- e>type</c-><c- o>=</c-><c- s>&quot;module&quot;</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;app.mjs&quot;</c-><c- p>&gt;&lt;/</c-><c- f>script</c-><c- p>&gt;</c-></code></pre>

   <p>This module, and all its dependencies (expressed through JavaScript <code>import</code> statements in the source file), will be fetched. Once the entire
   resulting module graph has been imported, and the document has finished parsing, the contents of
   <code>app.mjs</code> will be evaluated.</p>

   <p>Additionally, if code from another <code id=the-script-element:the-script-element-13><a href=#the-script-element>script</a></code> element in the same <code>Window</code>
   imports the module from <code>app.mjs</code> (e.g. via <code>import
   "./app.mjs";</code>), then the same <span>JavaScript module script</span> created by the
   former <code id=the-script-element:the-script-element-14><a href=#the-script-element>script</a></code> element will be imported.</p>

  </div>

  <div id=script-nomodule-example class=example><a href=#script-nomodule-example class=self-link></a>

  <p>This example shows how to include a <span>JavaScript module script</span> for modern user
  agents, and a <span>classic script</span> for older user agents:</p>

  <pre><code class='html'><c- p>&lt;</c-><c- f>script</c-> <c- e>type</c-><c- o>=</c-><c- s>&quot;module&quot;</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;app.mjs&quot;</c-><c- p>&gt;&lt;/</c-><c- f>script</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>script</c-> <c- e>nomodule</c-> <c- e>defer</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;classic-app-bundle.js&quot;</c-><c- p>&gt;&lt;/</c-><c- f>script</c-><c- p>&gt;</c-></code></pre>

  <p>In modern user agents that support <span>JavaScript module
  scripts</span>, the <code id=the-script-element:the-script-element-15><a href=#the-script-element>script</a></code> element with the <code id=the-script-element:attr-script-nomodule-3><a href=#attr-script-nomodule>nomodule</a></code> attribute will be ignored, and the
  <code id=the-script-element:the-script-element-16><a href=#the-script-element>script</a></code> element with a <code id=the-script-element:attr-script-type-7><a href=#attr-script-type>type</a></code> of "<code>module</code>" will be fetched and evaluated (as a <span>JavaScript module
  script</span>). Conversely, older user agents will ignore the <code id=the-script-element:the-script-element-17><a href=#the-script-element>script</a></code> element with a
  <code id=the-script-element:attr-script-type-8><a href=#attr-script-type>type</a></code> of "<code>module</code>", as that is an
  unknown script type for them — but they will have no problem fetching and evaluating the other
  <code id=the-script-element:the-script-element-18><a href=#the-script-element>script</a></code> element (as a <span>classic script</span>), since they do not implement the
  <code id=the-script-element:attr-script-nomodule-4><a href=#attr-script-nomodule>nomodule</a></code> attribute.</p>

  </div>

  <div id=script-type-module-example-2 class=example><a href=#script-type-module-example-2 class=self-link></a>

   <p>The following sample shows how a <code id=the-script-element:the-script-element-19><a href=#the-script-element>script</a></code> element can be used to write an inline
   <span>JavaScript module script</span> that performs a number of substitutions on the document's
   text, in order to make for a more interesting reading experience (e.g. on a news site):
   <a href=references.html#refsXKCD1288>[XKCD1288]</a></p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>script</c-> <c- e>type</c-><c- o>=</c-><c- s>&quot;module&quot;</c-><c- p>&gt;</c->
 <c- k>import</c-> <c- p>{</c-> walkAllTextNodeDescendants <c- p>}</c-> <c- k>from</c-> <c- u>&quot;./dom-utils.mjs&quot;</c-><c- p>;</c->

 <c- a>const</c-> substitutions <c- o>=</c-> <c- k>new</c-> Map<c- p>([</c->
   <c- p>[</c-><c- u>&quot;witnesses&quot;</c-><c- p>,</c-> <c- u>&quot;these dudes I know&quot;</c-><c- p>]</c->
   <c- p>[</c-><c- u>&quot;allegedly&quot;</c-><c- p>,</c-> <c- u>&quot;kinda probably&quot;</c-><c- p>]</c->
   <c- p>[</c-><c- u>&quot;new study&quot;</c-><c- p>,</c-> <c- u>&quot;Tumblr post&quot;</c-><c- p>]</c->
   <c- p>[</c-><c- u>&quot;rebuild&quot;</c-><c- p>,</c-> <c- u>&quot;avenge&quot;</c-><c- p>]</c->
   <c- p>[</c-><c- u>&quot;space&quot;</c-><c- p>,</c-> <c- u>&quot;spaaace&quot;</c-><c- p>]</c->
   <c- p>[</c-><c- u>&quot;Google glass&quot;</c-><c- p>,</c-> <c- u>&quot;Virtual Boy&quot;</c-><c- p>]</c->
   <c- p>[</c-><c- u>&quot;smartphone&quot;</c-><c- p>,</c-> <c- u>&quot;Pokédex&quot;</c-><c- p>]</c->
   <c- p>[</c-><c- u>&quot;electric&quot;</c-><c- p>,</c-> <c- u>&quot;atomic&quot;</c-><c- p>]</c->
   <c- p>[</c-><c- u>&quot;Senator&quot;</c-><c- p>,</c-> <c- u>&quot;Elf-Lord&quot;</c-><c- p>]</c->
   <c- p>[</c-><c- u>&quot;car&quot;</c-><c- p>,</c-> <c- u>&quot;cat&quot;</c-><c- p>]</c->
   <c- p>[</c-><c- u>&quot;election&quot;</c-><c- p>,</c-> <c- u>&quot;eating contest&quot;</c-><c- p>]</c->
   <c- p>[</c-><c- u>&quot;Congressional leaders&quot;</c-><c- p>,</c-> <c- u>&quot;river spirits&quot;</c-><c- p>]</c->
   <c- p>[</c-><c- u>&quot;homeland security&quot;</c-><c- p>,</c-> <c- u>&quot;Homestar Runner&quot;</c-><c- p>]</c->
   <c- p>[</c-><c- u>&quot;could not be reached for comment&quot;</c-><c- p>,</c-> <c- u>&quot;is guilty and everyone knows it&quot;</c-><c- p>]</c->
 <c- p>]);</c->

 <c- a>function</c-> substitute<c- p>(</c->textNode<c- p>)</c-> <c- p>{</c->
   <c- k>for</c-> <c- p>(</c-><c- a>const</c-> <c- p>[</c->before<c- p>,</c-> after<c- p>]</c-> <c- k>of</c-> substitutions<c- p>.</c->entries<c- p>())</c-> <c- p>{</c->
     textNode<c- p>.</c->data <c- o>=</c-> textNode<c- p>.</c->data<c- p>.</c->replace<c- p>(</c-><c- k>new</c-> RegExp<c- p>(</c-><c- sb>`\\b</c-><c- si>${</c->before<c- si>}</c-><c- sb>\\b`</c-><c- p>,</c-> <c- u>&quot;ig&quot;</c-><c- p>),</c-> after<c- p>);</c->
   <c- p>}</c->
 <c- p>}</c->

 walkAllTextNodeDescendants<c- p>(</c->document<c- p>.</c->body<c- p>,</c-> substitute<c- p>);</c->
<c- p>&lt;/</c-><c- f>script</c-><c- p>&gt;</c-></code></pre>

   <p>Some notable features gained by using a JavaScript module script include the ability to import
   functions from other JavaScript modules, strict mode by default, and how top-level declarations
   do not introduce new properties onto the <span>global object</span>. Also note that no matter
   where this <code id=the-script-element:the-script-element-20><a href=#the-script-element>script</a></code> element appears in the document, it will not be evaluated until
   both document parsing has complete and its dependency (<code>dom-utils.mjs</code>) has
   been fetched and evaluated.</p>
  </div>

  <div id=json-module-script-example class=example><a href=#json-module-script-example class=self-link></a>
   <p>The following sample shows how a <span>JSON module script</span> can be imported from inside
   a <span>JavaScript module script</span>:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>script</c-> <c- e>type</c-><c- o>=</c-><c- s>&quot;module&quot;</c-><c- p>&gt;</c->
 <c- k>import</c-> peopleInSpace <c- k>from</c-> <c- u>&quot;http://api.open-notify.org/astros.json&quot;</c-> <c- a>with</c-> <c- p>{</c-> type<c- o>:</c-> <c- u>&quot;json&quot;</c-> <c- p>};</c->

 <c- a>const</c-> list <c- o>=</c-> document<c- p>.</c->querySelector<c- p>(</c-><c- u>&quot;#people-in-space&quot;</c-><c- p>);</c->
 <c- k>for</c-> <c- p>(</c-><c- a>const</c-> <c- p>{</c-> craft<c- p>,</c-> name <c- p>}</c-> <c- k>of</c-> peopleInSpace<c- p>.</c->people<c- p>)</c-> <c- p>{</c->
   <c- a>const</c-> li <c- o>=</c-> document<c- p>.</c->createElement<c- p>(</c-><c- u>&quot;li&quot;</c-><c- p>);</c->
   li<c- p>.</c->textContent <c- o>=</c-> <c- sb>`</c-><c- si>${</c->name<c- si>}</c-><c- sb> / </c-><c- si>${</c->craft<c- si>}</c-><c- sb>`</c-><c- p>;</c->
   list<c- p>.</c->append<c- p>(</c->li<c- p>);</c->
 <c- p>}</c->
<c- p>&lt;/</c-><c- f>script</c-><c- p>&gt;</c-></code></pre>

   <p>MIME type checking for module scripts is strict. In order for the fetch of the <span>JSON
   module script</span> to succeed, the HTTP response must have a <a id=the-script-element:json-mime-type href=https://mimesniff.spec.whatwg.org/#json-mime-type data-x-internal=json-mime-type>JSON MIME type</a>, for
   example <code>Content-Type: text/json</code>. On the other hand, if the <code>with { type: "json" }</code> part of the statement is omitted, it is assumed that the
   intent is to import a <span>JavaScript module script</span>, and the fetch will fail if the HTTP
   response has a MIME type that is not a <a id=the-script-element:javascript-mime-type href=https://mimesniff.spec.whatwg.org/#javascript-mime-type data-x-internal=javascript-mime-type>JavaScript MIME type</a>.</p>
  </div>

  


  <h5 id=scriptingLanguages><span class=secno>4.12.1.1</span> Scripting languages<a href=#scriptingLanguages class=self-link></a></h5>

  

  <p>Servers should use <code id=scriptingLanguages:text/javascript><a href=indices.html#text/javascript>text/javascript</a></code> for JavaScript resources, in accordance with
  <cite>Updates to ECMAScript Media Types</cite>. Servers should not use other
  <a href=https://mimesniff.spec.whatwg.org/#javascript-mime-type id=scriptingLanguages:javascript-mime-type data-x-internal=javascript-mime-type>JavaScript MIME types</a> for JavaScript resources, and
  must not use non-<a href=https://mimesniff.spec.whatwg.org/#javascript-mime-type id=scriptingLanguages:javascript-mime-type-2 data-x-internal=javascript-mime-type>JavaScript MIME types</a>.
  <a href=references.html#refsRFC9239>[RFC9239]</a></p>

  


  <h5 id=restrictions-for-contents-of-script-elements><span class=secno>4.12.1.2</span> <dfn>Restrictions for contents of <code>script</code> elements</dfn><a href=#restrictions-for-contents-of-script-elements class=self-link></a></h5>

  <p class=note>The easiest and safest way to avoid the rather strange restrictions described in
  this section is to always escape an ASCII case-insensitive match for "<code>&lt;!--</code>" as "<code>\x3C!--</code>", "<code>&lt;script</code>" as "<code>\x3Cscript</code>", and "<code>&lt;/script</code>" as "<code>\x3C/script</code>" when these sequences appear
  in literals in scripts (e.g. in strings, regular expressions, or comments), and to avoid writing
  code that uses such constructs in expressions. Doing so avoids the pitfalls that the restrictions
  in this section are prone to triggering: namely, that, for historical reasons, parsing of
  <code id=restrictions-for-contents-of-script-elements:the-script-element><a href=#the-script-element>script</a></code> blocks in HTML is a strange and exotic practice that acts unintuitively in the
  face of these sequences.</p>

  <p>The <code id=restrictions-for-contents-of-script-elements:the-script-element-2><a href=#the-script-element>script</a></code> element's <a id=restrictions-for-contents-of-script-elements:descendant-text-content href=https://dom.spec.whatwg.org/#concept-descendant-text-content data-x-internal=descendant-text-content>descendant text content</a> must match the <code>script</code> production in the following ABNF, the character set for which is Unicode.
  <a href=references.html#refsABNF>[ABNF]</a></p>

  <pre><code class='abnf'><c- nc>script</c->        <c- o>=</c-> <c- nc>outer</c-> <c- o>*</c-><c- p>(</c-> <c- nc>comment-open</c-> <c- nc>inner</c-> <c- nc>comment-close</c-> <c- nc>outer</c-> <c- p>)</c->

<c- nc>outer</c->         <c- o>=</c-> &lt; <c- nc>any</c-> <c- nc>string</c-> <c- nc>that</c-> <c- nc>doesn</c->&apos;t <c- nc>contain</c-> a <c- nc>substring</c-> <c- nc>that</c-> <c- nc>matches</c-> <c- nc>not-in-outer</c-> &gt;
<c- nc>not-in-outer</c->  <c- o>=</c-> <c- nc>comment-open</c->
<c- nc>inner</c->         <c- o>=</c-> &lt; <c- nc>any</c-> <c- nc>string</c-> <c- nc>that</c-> <c- nc>doesn</c->&apos;t <c- nc>contain</c-> a <c- nc>substring</c-> <c- nc>that</c-> <c- nc>matches</c-> <c- nc>not-in-inner</c-> &gt;
<c- nc>not-in-inner</c->  <c- o>=</c-> <c- nc>comment-close</c-> <c- o>/</c-> <c- nc>script-open</c->

<c- nc>comment-open</c->  <c- o>=</c-> <c- l>&quot;&lt;!--&quot;</c->
<c- nc>comment-close</c-> <c- o>=</c-> <c- l>&quot;--&gt;&quot;</c->
<c- nc>script-open</c->   <c- o>=</c-> <c- l>&quot;&lt;&quot;</c-> s c r i p t <c- nc>tag-end</c->

s             <c- o>=</c->  <c- l>%x0053</c-> <c- c1>; U+0053 LATIN CAPITAL LETTER S</c->
s             <c- o>=/</c-> <c- l>%x0073</c-> <c- c1>; U+0073 LATIN SMALL LETTER S</c->
c             <c- o>=</c->  <c- l>%x0043</c-> <c- c1>; U+0043 LATIN CAPITAL LETTER C</c->
c             <c- o>=/</c-> <c- l>%x0063</c-> <c- c1>; U+0063 LATIN SMALL LETTER C</c->
r             <c- o>=</c->  <c- l>%x0052</c-> <c- c1>; U+0052 LATIN CAPITAL LETTER R</c->
r             <c- o>=/</c-> <c- l>%x0072</c-> <c- c1>; U+0072 LATIN SMALL LETTER R</c->
i             <c- o>=</c->  <c- l>%x0049</c-> <c- c1>; U+0049 LATIN CAPITAL LETTER I</c->
i             <c- o>=/</c-> <c- l>%x0069</c-> <c- c1>; U+0069 LATIN SMALL LETTER I</c->
p             <c- o>=</c->  <c- l>%x0050</c-> <c- c1>; U+0050 LATIN CAPITAL LETTER P</c->
p             <c- o>=/</c-> <c- l>%x0070</c-> <c- c1>; U+0070 LATIN SMALL LETTER P</c->
t             <c- o>=</c->  <c- l>%x0054</c-> <c- c1>; U+0054 LATIN CAPITAL LETTER T</c->
t             <c- o>=/</c-> <c- l>%x0074</c-> <c- c1>; U+0074 LATIN SMALL LETTER T</c->

<c- nc>tag-end</c->       <c- o>=</c->  <c- l>%x0009</c-> <c- c1>; U+0009 CHARACTER TABULATION (tab)</c->
<c- nc>tag-end</c->       <c- o>=/</c-> <c- l>%x000A</c-> <c- c1>; U+000A LINE FEED (LF)</c->
<c- nc>tag-end</c->       <c- o>=/</c-> <c- l>%x000C</c-> <c- c1>; U+000C FORM FEED (FF)</c->
<c- nc>tag-end</c->       <c- o>=/</c-> <c- l>%x0020</c-> <c- c1>; U+0020 SPACE</c->
<c- nc>tag-end</c->       <c- o>=/</c-> <c- l>%x002F</c-> <c- c1>; U+002F SOLIDUS (/)</c->
<c- nc>tag-end</c->       <c- o>=/</c-> <c- l>%x003E</c-> <c- c1>; U+003E GREATER-THAN SIGN (&gt;)</c-></code></pre>

  <p>When a <code id=restrictions-for-contents-of-script-elements:the-script-element-3><a href=#the-script-element>script</a></code> element contains <a href=#inline-documentation-for-external-scripts id=restrictions-for-contents-of-script-elements:inline-documentation-for-external-scripts>script documentation</a>, there are
  further restrictions on the contents of the element, as described in the section below.</p>

  <div class=example>

   <p>The following script illustrates this issue. Suppose you have a script that contains a string,
   as in:</p>

   <pre><code class='js'><c- a>const</c-> example <c- o>=</c-> <c- t>&apos;Consider this string: &lt;!-- &lt;script&gt;&apos;</c-><c- p>;</c->
console<c- p>.</c->log<c- p>(</c->example<c- p>);</c-></code></pre>

   <p>If one were to put this string directly in a <code id=restrictions-for-contents-of-script-elements:the-script-element-4><a href=#the-script-element>script</a></code> block, it would violate the
   restrictions above:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>script</c-><c- p>&gt;</c->
  <c- a>const</c-> example <c- o>=</c-> <c- t>&apos;Consider this string: &lt;!-- &lt;script&gt;&apos;</c-><c- p>;</c->
  console<c- p>.</c->log<c- p>(</c->example<c- p>);</c->
<c- p>&lt;/</c-><c- f>script</c-><c- p>&gt;</c-></code></pre>

   <p>The bigger problem, though, and the reason why it would violate those restrictions, is that
   actually the script would get parsed weirdly: <em>the script block above is not terminated</em>.
   That is, what looks like a "<code>&lt;/script></code>" end tag in this snippet is
   actually still part of the <code id=restrictions-for-contents-of-script-elements:the-script-element-5><a href=#the-script-element>script</a></code> block. The script doesn't execute (since it's not
   terminated); if it somehow were to execute, as it might if the markup looked as follows, it would
   fail because the script (highlighted here) is not valid JavaScript:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>script</c-><c- p>&gt;</c-><mark>
  <c- a>const</c-> example <c- o>=</c-> <c- t>&apos;Consider this string: &lt;!-- &lt;script&gt;&apos;</c-><c- p>;</c->
  console<c- p>.</c->log<c- p>(</c->example<c- p>);</c->
<c- p>&lt;/</c-><c- f>script</c-><c- p>&gt;</c->
<c- c>&lt;!-- despite appearances, this is actually part of the script still! --&gt;</c->
<c- p>&lt;</c-><c- f>script</c-><c- p>&gt;</c->
 <c- p>...</c-> <c- c1>// this is the same script block still...</c->
</mark><c- p>&lt;/</c-><c- f>script</c-><c- p>&gt;</c-></code></pre>

   <p>What is going on here is that for legacy reasons, "<code>&lt;!--</code>" and "<code>&lt;script</code>" strings in <code id=restrictions-for-contents-of-script-elements:the-script-element-6><a href=#the-script-element>script</a></code> elements in HTML need to be balanced
   in order for the parser to consider closing the block.</p>

   <p>By escaping the problematic strings as mentioned at the top of this section, the problem is
   avoided entirely:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>script</c-><c- p>&gt;</c-><mark>
  <c- c1>// Note: `\x3C` is an escape sequence for `&lt;`.</c->
  <c- a>const</c-> example <c- o>=</c-> <c- t>&apos;Consider this string: \x3C!-- \x3Cscript&gt;&apos;</c-><c- p>;</c->
  console<c- p>.</c->log<c- p>(</c->example<c- p>);</c->
</mark><c- p>&lt;/</c-><c- f>script</c-><c- p>&gt;</c->
<c- c>&lt;!-- this is just a comment between script blocks --&gt;</c->
<c- p>&lt;</c-><c- f>script</c-><c- p>&gt;</c-><mark>
 <c- p>...</c-> <c- c1>// this is a new script block</c->
</mark><c- p>&lt;/</c-><c- f>script</c-><c- p>&gt;</c-></code></pre>

   <p>It is possible for these sequences to naturally occur in script expressions, as in the
   following examples:</p>

   <pre><code class='js'><c- k>if</c-> <c- p>(</c->x<c- c>&lt;!--</c->y<c- p>)</c-> <c- p>{</c-> <c- p>...</c-> <c- p>}</c->
<c- k>if</c-> <c- p>(</c-> player<c- o>&lt;</c->script <c- p>)</c-> <c- p>{</c-> <c- p>...</c-> <c- p>}</c-></code></pre>

   <p>In such cases the characters cannot be escaped, but the expressions can be rewritten so that
   the sequences don't occur, as in:</p>

   <pre><code class='js'><c- k>if</c-> <c- p>(</c->x <c- o>&lt;</c-> <c- o>!--</c->y<c- p>)</c-> <c- p>{</c-> <c- p>...</c-> <c- p>}</c->
<c- k>if</c-> <c- p>(</c-><c- o>!--</c->y <c- o>&gt;</c-> x<c- p>)</c-> <c- p>{</c-> <c- p>...</c-> <c- p>}</c->
<c- k>if</c-> <c- p>(</c-><c- o>!</c-><c- p>(</c-><c- o>--</c->y<c- p>)</c-> <c- o>&gt;</c-> x<c- p>)</c-> <c- p>{</c-> <c- p>...</c-> <c- p>}</c->
<c- k>if</c-> <c- p>(</c->player <c- o>&lt;</c-> script<c- p>)</c-> <c- p>{</c-> <c- p>...</c-> <c- p>}</c->
<c- k>if</c-> <c- p>(</c->script <c- o>&gt;</c-> player<c- p>)</c-> <c- p>{</c-> <c- p>...</c-> <c- p>}</c-></code></pre>

   <p>Doing this also avoids a different pitfall as well: for related historical reasons, the string
   "&lt;!--" in <span>classic scripts</span> is actually treated as a line
   comment start, just like "//".</p>

  </div>


  <h5 id=inline-documentation-for-external-scripts><span class=secno>4.12.1.3</span> <dfn>Inline documentation for external scripts</dfn><a href=#inline-documentation-for-external-scripts class=self-link></a></h5>

  <p>If a <code id=inline-documentation-for-external-scripts:the-script-element><a href=#the-script-element>script</a></code> element's <code id=inline-documentation-for-external-scripts:attr-script-src><a href=#attr-script-src>src</a></code> attribute is
  specified, then the contents of the <code id=inline-documentation-for-external-scripts:the-script-element-2><a href=#the-script-element>script</a></code> element, if any, must be such that the
  value of the <code id=inline-documentation-for-external-scripts:dom-script-text><a href=#dom-script-text>text</a></code> IDL attribute, which is derived from the
  element's contents, matches the <code>documentation</code> production in the following
  ABNF, the character set for which is Unicode. <a href=references.html#refsABNF>[ABNF]</a></p>

  <pre><code class='abnf'><c- nc>documentation</c-> <c- o>=</c-> <c- o>*</c-><c- p>(</c-> <c- o>*</c-><c- p>(</c-> <c- nc>space</c-> <c- o>/</c-> <c- nc>tab</c-> <c- o>/</c-> <c- nc>comment</c-> <c- p>)</c-> <c- p>[</c-> <c- nc>line-comment</c-> <c- p>]</c-> <c- nc>newline</c-> <c- p>)</c->
<c- nc>comment</c->       <c- o>=</c-> <c- nc>slash</c-> <c- nc>star</c-> <c- o>*</c-><c- p>(</c-> <c- nc>not-star</c-> <c- o>/</c-> <c- nc>star</c-> <c- nc>not-slash</c-> <c- p>)</c-> <c- o>1*</c-><c- nc>star</c-> <c- nc>slash</c->
<c- nc>line-comment</c->  <c- o>=</c-> <c- nc>slash</c-> <c- nc>slash</c-> <c- o>*</c-><c- nc>not-newline</c->

<c- c1>; characters</c->
<c- nc>tab</c->           <c- o>=</c-> <c- l>%x0009</c-> <c- c1>; U+0009 CHARACTER TABULATION (tab)</c->
<c- nc>newline</c->       <c- o>=</c-> <c- l>%x000A</c-> <c- c1>; U+000A LINE FEED (LF)</c->
<c- nc>space</c->         <c- o>=</c-> <c- l>%x0020</c-> <c- c1>; U+0020 SPACE</c->
<c- nc>star</c->          <c- o>=</c-> <c- l>%x002A</c-> <c- c1>; U+002A ASTERISK (*)</c->
<c- nc>slash</c->         <c- o>=</c-> <c- l>%x002F</c-> <c- c1>; U+002F SOLIDUS (/)</c->
<c- nc>not-newline</c->   <c- o>=</c-> <c- l>%x0000-0009</c-> <c- o>/</c-> <c- l>%x000B-10FFFF</c->
                <c- c1>; a </c-><a id='inline-documentation-for-external-scripts:scalar-value' href='https://infra.spec.whatwg.org/#scalar-value' data-x-internal='scalar-value'><c- c1>scalar value</c-></a><c- c1> other than U+000A LINE FEED (LF)</c->
<c- nc>not-star</c->      <c- o>=</c-> <c- l>%x0000-0029</c-> <c- o>/</c-> <c- l>%x002B-10FFFF</c->
                <c- c1>; a </c-><a id='inline-documentation-for-external-scripts:scalar-value-2' href='https://infra.spec.whatwg.org/#scalar-value' data-x-internal='scalar-value'><c- c1>scalar value</c-></a><c- c1> other than U+002A ASTERISK (*)</c->
<c- nc>not-slash</c->     <c- o>=</c-> <c- l>%x0000-002E</c-> <c- o>/</c-> <c- l>%x0030-10FFFF</c->
                <c- c1>; a </c-><a id='inline-documentation-for-external-scripts:scalar-value-3' href='https://infra.spec.whatwg.org/#scalar-value' data-x-internal='scalar-value'><c- c1>scalar value</c-></a><c- c1> other than U+002F SOLIDUS (/)</c-></code></pre>

  <p class=note>This corresponds to putting the contents of the element in JavaScript
  comments.</p>

  <p class=note>This requirement is in addition to the earlier restrictions on the syntax of
  contents of <code id=inline-documentation-for-external-scripts:the-script-element-3><a href=#the-script-element>script</a></code> elements.</p>

  <div class=example>

   <p>This allows authors to include documentation, such as license information or API information,
   inside their documents while still referring to external script files. The syntax is constrained
   so that authors don't accidentally include what looks like valid script while also providing a
   <code id=inline-documentation-for-external-scripts:attr-script-src-2><a href=#attr-script-src>src</a></code> attribute.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>script</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;cool-effects.js&quot;</c-><c- p>&gt;</c->
 <c- c1>// create new instances using:</c->
 <c- c1>//    var e = new Effect();</c->
 <c- c1>// start the effect using .play, stop using .stop:</c->
 <c- c1>//    e.play();</c->
 <c- c1>//    e.stop();</c->
<c- p>&lt;/</c-><c- f>script</c-><c- p>&gt;</c-></code></pre>

  </div>


  



  <h4 id=the-noscript-element><span class=secno>4.12.2</span> The <dfn data-dfn-type=element><code>noscript</code></dfn> element<a href=#the-noscript-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/noscript title="The <noscript> HTML element defines a section of HTML to be inserted if a script type on the page is unsupported or if scripting is currently turned off in the browser.">Element/noscript</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>3+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <dl class=element><dt><a href=dom.html#concept-element-categories id=the-noscript-element:concept-element-categories>Categories</a>:<dd><a id=the-noscript-element:metadata-content-2 href=dom.html#metadata-content-2>Metadata content</a>.<dd><a id=the-noscript-element:flow-content-2 href=dom.html#flow-content-2>Flow content</a>.<dd><a id=the-noscript-element:phrasing-content-2 href=dom.html#phrasing-content-2>Phrasing content</a>.<dd><a id=the-noscript-element:select-element-inner-content-elements-2 href=dom.html#select-element-inner-content-elements-2><code>select</code> element inner content elements</a>.<dd><a id=the-noscript-element:optgroup-element-inner-content-elements-2 href=dom.html#optgroup-element-inner-content-elements-2><code>optgroup</code> element inner content elements</a>.<dt><a href=dom.html#concept-element-contexts id=the-noscript-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>In a <code id=the-noscript-element:the-head-element><a href=semantics.html#the-head-element>head</a></code> element of an <a href=https://dom.spec.whatwg.org/#html-document id=the-noscript-element:html-documents data-x-internal=html-documents>HTML document</a>, if there are no ancestor <code id=the-noscript-element:the-noscript-element><a href=#the-noscript-element>noscript</a></code> elements.<dd>Where <a id=the-noscript-element:phrasing-content-2-2 href=dom.html#phrasing-content-2>phrasing content</a> is expected in <a id=the-noscript-element:html-documents-2 href=https://dom.spec.whatwg.org/#html-document data-x-internal=html-documents>HTML documents</a>, if there are no ancestor <code id=the-noscript-element:the-noscript-element-2><a href=#the-noscript-element>noscript</a></code> elements.<dt><a href=dom.html#concept-element-content-model id=the-noscript-element:concept-element-content-model>Content model</a>:<dd>When <span>scripting is disabled</span>, in a <code id=the-noscript-element:the-head-element-2><a href=semantics.html#the-head-element>head</a></code> element: in any order, zero or more <code id=the-noscript-element:the-link-element><a href=semantics.html#the-link-element>link</a></code> elements, zero or more <code id=the-noscript-element:the-style-element><a href=semantics.html#the-style-element>style</a></code> elements, and zero or more <code id=the-noscript-element:the-meta-element><a href=semantics.html#the-meta-element>meta</a></code> elements.<dd>When <span>scripting is disabled</span>, not in a <code id=the-noscript-element:the-head-element-3><a href=semantics.html#the-head-element>head</a></code> element: <a id=the-noscript-element:transparent href=dom.html#transparent>transparent</a>, but there must be no <code id=the-noscript-element:the-noscript-element-3><a href=#the-noscript-element>noscript</a></code> element descendants.<dd>Otherwise: text that conforms to the requirements given in the prose.<dt><a href=dom.html#concept-element-tag-omission id=the-noscript-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>Neither tag is omissible.<dt><a href=dom.html#concept-element-attributes id=the-noscript-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-noscript-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dt><a href=dom.html#concept-element-accessibility-considerations id=the-noscript-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-noscript>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-noscript>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-noscript-element:concept-element-dom>DOM interface</a>:<dd>Uses <code>HTMLElement</code>.</dl>

  <p>The <code id=the-noscript-element:the-noscript-element-4><a href=#the-noscript-element>noscript</a></code> element <a id=the-noscript-element:represents href=dom.html#represents>represents</a> nothing if <span>scripting is enabled</span>, and <a id=the-noscript-element:represents-2 href=dom.html#represents>represents</a> its children if
  <span>scripting is disabled</span>. It is used to present different
  markup to user agents that support scripting and those that don't support scripting, by affecting
  how the document is parsed.</p>

  <p>When used in <a id=the-noscript-element:html-documents-3 href=https://dom.spec.whatwg.org/#html-document data-x-internal=html-documents>HTML documents</a>, the allowed content model is as follows:</p>

  <dl><dt>In a <code id=the-noscript-element:the-head-element-4><a href=semantics.html#the-head-element>head</a></code> element, if <span>scripting is
   disabled</span> for the <code id=the-noscript-element:the-noscript-element-5><a href=#the-noscript-element>noscript</a></code> element<dd><p>The <code id=the-noscript-element:the-noscript-element-6><a href=#the-noscript-element>noscript</a></code> element must contain only <code id=the-noscript-element:the-link-element-2><a href=semantics.html#the-link-element>link</a></code>, <code id=the-noscript-element:the-style-element-2><a href=semantics.html#the-style-element>style</a></code>,
   and <code id=the-noscript-element:the-meta-element-2><a href=semantics.html#the-meta-element>meta</a></code> elements.<dt>In a <code id=the-noscript-element:the-head-element-5><a href=semantics.html#the-head-element>head</a></code> element, if <span>scripting is enabled</span>
   for the <code id=the-noscript-element:the-noscript-element-7><a href=#the-noscript-element>noscript</a></code> element<dd><p>The <code id=the-noscript-element:the-noscript-element-8><a href=#the-noscript-element>noscript</a></code> element must contain only text, except that invoking the
   <span>HTML fragment parsing algorithm</span>  with
   the <code id=the-noscript-element:the-noscript-element-9><a href=#the-noscript-element>noscript</a></code> element as the <var>context</var>
   element and the text contents as the <var>input</var> must result in a list of nodes
   that consists only of <code id=the-noscript-element:the-link-element-3><a href=semantics.html#the-link-element>link</a></code>, <code id=the-noscript-element:the-style-element-3><a href=semantics.html#the-style-element>style</a></code>, and <code id=the-noscript-element:the-meta-element-3><a href=semantics.html#the-meta-element>meta</a></code> elements that
   would be conforming if they were children of the <code id=the-noscript-element:the-noscript-element-10><a href=#the-noscript-element>noscript</a></code> element, and no <span>parse errors</span>.<dt>Outside of <code id=the-noscript-element:the-head-element-6><a href=semantics.html#the-head-element>head</a></code> elements, if <span>scripting is
   disabled</span> for the <code id=the-noscript-element:the-noscript-element-11><a href=#the-noscript-element>noscript</a></code> element<dd><p>The <code id=the-noscript-element:the-noscript-element-12><a href=#the-noscript-element>noscript</a></code> element's content model is <a id=the-noscript-element:transparent-2 href=dom.html#transparent>transparent</a>, with the
   additional restriction that a <code id=the-noscript-element:the-noscript-element-13><a href=#the-noscript-element>noscript</a></code> element must not have a <code id=the-noscript-element:the-noscript-element-14><a href=#the-noscript-element>noscript</a></code>
   element as an ancestor (that is, <code id=the-noscript-element:the-noscript-element-15><a href=#the-noscript-element>noscript</a></code> can't be nested).<dt>Outside of <code id=the-noscript-element:the-head-element-7><a href=semantics.html#the-head-element>head</a></code> elements, if <span>scripting is
   enabled</span> for the <code id=the-noscript-element:the-noscript-element-16><a href=#the-noscript-element>noscript</a></code> element<dd>
    <p>The <code id=the-noscript-element:the-noscript-element-17><a href=#the-noscript-element>noscript</a></code> element must contain only text, except that the text must be such
    that running the following algorithm results in a conforming document with no
    <code id=the-noscript-element:the-noscript-element-18><a href=#the-noscript-element>noscript</a></code> elements and no <code id=the-noscript-element:the-script-element><a href=#the-script-element>script</a></code> elements, and such that no step in the
    algorithm throws an exception or causes an <span>HTML parser</span> to flag a <span>parse
    error</span>:</p>
    

    <ol><li>Remove every <code id=the-noscript-element:the-script-element-2><a href=#the-script-element>script</a></code> element from the document.<li>Make a list of every <code id=the-noscript-element:the-noscript-element-19><a href=#the-noscript-element>noscript</a></code> element in the document. For every
     <code id=the-noscript-element:the-noscript-element-20><a href=#the-noscript-element>noscript</a></code> element in that list, perform the following steps:

      <ol><li>Let <var>s</var> be the <a id=the-noscript-element:child-text-content href=https://dom.spec.whatwg.org/#concept-child-text-content data-x-internal=child-text-content>child text content</a> of the <code id=the-noscript-element:the-noscript-element-21><a href=#the-noscript-element>noscript</a></code>
       element.<li>Set the <code id=the-noscript-element:dom-element-outerhtml><a href=dynamic-markup-insertion.html#dom-element-outerhtml>outerHTML</a></code> attribute of the
       <code id=the-noscript-element:the-noscript-element-22><a href=#the-noscript-element>noscript</a></code> element to the value of <var>s</var>. (This, as a side-effect, causes
       the <code id=the-noscript-element:the-noscript-element-23><a href=#the-noscript-element>noscript</a></code> element to be removed from the document.)</ol>
     </ol>
   </dl>

  <p class=note>All these contortions are required because, for historical reasons, the
  <code id=the-noscript-element:the-noscript-element-24><a href=#the-noscript-element>noscript</a></code> element is handled differently by the <span>HTML parser</span> based on
  whether <span>scripting was enabled or not</span> when the parser was
  invoked.</p>

  <p>The <code id=the-noscript-element:the-noscript-element-25><a href=#the-noscript-element>noscript</a></code> element must not be used in <a id=the-noscript-element:xml-documents href=https://dom.spec.whatwg.org/#xml-document data-x-internal=xml-documents>XML documents</a>.</p>

  <p class=note>The <code id=the-noscript-element:the-noscript-element-26><a href=#the-noscript-element>noscript</a></code> element is only effective in <a id=the-noscript-element:syntax href=syntax.html#syntax>the HTML
  syntax</a>, it has no effect in <a id=the-noscript-element:the-xhtml-syntax href=xhtml.html#the-xhtml-syntax>the XML syntax</a>. This is because the way it works
  is by essentially "turning off" the parser when scripts are enabled, so that the contents of the
  element are treated as pure text and not as real elements. XML does not define a mechanism by
  which to do this.</p>

  

  <div class=example>

   <p>In the following example, a <code id=the-noscript-element:the-noscript-element-27><a href=#the-noscript-element>noscript</a></code> element is
   used to provide fallback for a script.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>form</c-> <c- e>action</c-><c- o>=</c-><c- s>&quot;calcSquare.php&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>label</c-> <c- e>for</c-><c- o>=</c-><c- s>x</c-><c- p>&gt;</c->Number<c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;</c->:
  <c- p>&lt;</c-><c- f>input</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;x&quot;</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;x&quot;</c-> <c- e>type</c-><c- o>=</c-><c- s>&quot;number&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>script</c-><c- p>&gt;</c->
  <c- a>var</c-> x <c- o>=</c-> document<c- p>.</c->getElementById<c- p>(</c-><c- t>&apos;x&apos;</c-><c- p>);</c->
  <c- a>var</c-> output <c- o>=</c-> document<c- p>.</c->createElement<c- p>(</c-><c- t>&apos;p&apos;</c-><c- p>);</c->
  output<c- p>.</c->textContent <c- o>=</c-> <c- t>&apos;Type a number; it will be squared right then!&apos;</c-><c- p>;</c->
  x<c- p>.</c->form<c- p>.</c->appendChild<c- p>(</c->output<c- p>);</c->
  x<c- p>.</c->form<c- p>.</c->onsubmit <c- o>=</c-> <c- a>function</c-> <c- p>()</c-> <c- p>{</c-> <c- k>return</c-> <c- kc>false</c-><c- p>;</c-> <c- p>}</c->
  x<c- p>.</c->oninput <c- o>=</c-> <c- a>function</c-> <c- p>()</c-> <c- p>{</c->
    <c- a>var</c-> v <c- o>=</c-> x<c- p>.</c->valueAsNumber<c- p>;</c->
    output<c- p>.</c->textContent <c- o>=</c-> v <c- o>+</c-> <c- t>&apos; squared is &apos;</c-> <c- o>+</c-> v <c- o>*</c-> v<c- p>;</c->
  <c- p>};</c->
 <c- p>&lt;/</c-><c- f>script</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>noscript</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>submit</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;Calculate Square&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>noscript</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>form</c-><c- p>&gt;</c-></code></pre>

   <p>When script is disabled, a button appears to do the calculation on the server side. When
   script is enabled, the value is computed on-the-fly instead.</p>

   <p>The <code id=the-noscript-element:the-noscript-element-28><a href=#the-noscript-element>noscript</a></code> element is a blunt instrument. Sometimes, scripts might be enabled,
   but for some reason the page's script might fail. For this reason, it's generally better to avoid
   using <code id=the-noscript-element:the-noscript-element-29><a href=#the-noscript-element>noscript</a></code>, and to instead design the script to change the page from being a
   scriptless page to a scripted page on the fly, as in the next example:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>form</c-> <c- e>action</c-><c- o>=</c-><c- s>&quot;calcSquare.php&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>label</c-> <c- e>for</c-><c- o>=</c-><c- s>x</c-><c- p>&gt;</c->Number<c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;</c->:
  <c- p>&lt;</c-><c- f>input</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;x&quot;</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;x&quot;</c-> <c- e>type</c-><c- o>=</c-><c- s>&quot;number&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <strong><c- p>&lt;</c-><c- f>input</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;submit&quot;</c-> <c- e>type</c-><c- o>=</c-><c- s>submit</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;Calculate Square&quot;</c-><c- p>&gt;</c-></strong>
 <c- p>&lt;</c-><c- f>script</c-><c- p>&gt;</c->
  <c- a>var</c-> x <c- o>=</c-> document<c- p>.</c->getElementById<c- p>(</c-><c- t>&apos;x&apos;</c-><c- p>);</c->
  <c- a>var</c-> output <c- o>=</c-> document<c- p>.</c->createElement<c- p>(</c-><c- t>&apos;p&apos;</c-><c- p>);</c->
  output<c- p>.</c->textContent <c- o>=</c-> <c- t>&apos;Type a number; it will be squared right then!&apos;</c-><c- p>;</c->
  x<c- p>.</c->form<c- p>.</c->appendChild<c- p>(</c->output<c- p>);</c->
  x<c- p>.</c->form<c- p>.</c->onsubmit <c- o>=</c-> <c- a>function</c-> <c- p>()</c-> <c- p>{</c-> <c- k>return</c-> <c- kc>false</c-><c- p>;</c-> <c- p>}</c->
  x<c- p>.</c->oninput <c- o>=</c-> <c- a>function</c-> <c- p>()</c-> <c- p>{</c->
    <c- a>var</c-> v <c- o>=</c-> x<c- p>.</c->valueAsNumber<c- p>;</c->
    output<c- p>.</c->textContent <c- o>=</c-> v <c- o>+</c-> <c- t>&apos; squared is &apos;</c-> <c- o>+</c-> v <c- o>*</c-> v<c- p>;</c->
  <c- p>};</c->
<strong>  <c- a>var</c-> submit <c- o>=</c-> document<c- p>.</c->getElementById<c- p>(</c-><c- t>&apos;submit&apos;</c-><c- p>);</c->
  submit<c- p>.</c->parentNode<c- p>.</c->removeChild<c- p>(</c->submit<c- p>);</c-></strong>
 <c- p>&lt;/</c-><c- f>script</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>form</c-><c- p>&gt;</c-></code></pre>

   <p>The above technique is also useful in <a id=the-noscript-element:xml-documents-2 href=https://dom.spec.whatwg.org/#xml-document data-x-internal=xml-documents>XML documents</a>, since <code id=the-noscript-element:the-noscript-element-30><a href=#the-noscript-element>noscript</a></code>
   is not allowed there.</p>

  </div>


  <h4 id=the-template-element><span class=secno>4.12.3</span> The <dfn data-dfn-type=element><code>template</code></dfn> element<a href=#the-template-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template title="The <template> HTML element is a mechanism for holding HTML that is not to be rendered immediately when a page is loaded but may be instantiated subsequently during runtime using JavaScript.">Element/template</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>22+</span></span><span class="safari yes"><span>Safari</span><span>8+</span></span><span class="chrome yes"><span>Chrome</span><span>26+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>13+</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>Yes</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <dl class=element><dt><a href=dom.html#concept-element-categories id=the-template-element:concept-element-categories>Categories</a>:<dd><a id=the-template-element:metadata-content-2 href=dom.html#metadata-content-2>Metadata content</a>.<dd><a id=the-template-element:flow-content-2 href=dom.html#flow-content-2>Flow content</a>.<dd><a id=the-template-element:phrasing-content-2 href=dom.html#phrasing-content-2>Phrasing content</a>.<dd><a href=dom.html#script-supporting-elements-2 id=the-template-element:script-supporting-elements-2>Script-supporting element</a>.<dt><a href=dom.html#concept-element-contexts id=the-template-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>Where <a id=the-template-element:metadata-content-2-2 href=dom.html#metadata-content-2>metadata content</a> is expected.<dd>Where <a id=the-template-element:phrasing-content-2-2 href=dom.html#phrasing-content-2>phrasing content</a> is expected.<dd>Where <a id=the-template-element:script-supporting-elements-2-2 href=dom.html#script-supporting-elements-2>script-supporting elements</a> are expected.<dd>As a child of a <code id=the-template-element:the-colgroup-element><a href=tables.html#the-colgroup-element>colgroup</a></code> element that doesn't have a <code id=the-template-element:attr-colgroup-span><a href=tables.html#attr-colgroup-span>span</a></code> attribute.<dt><a href=dom.html#concept-element-content-model id=the-template-element:concept-element-content-model>Content model</a>:<dd><a href=dom.html#concept-content-nothing id=the-template-element:concept-content-nothing>Nothing</a> (for clarification, <a href=#template-example>see example</a>).<dt><a href=dom.html#concept-element-tag-omission id=the-template-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>Neither tag is omissible.<dt><a href=dom.html#concept-element-attributes id=the-template-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-template-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dd><code id=the-template-element:attr-template-shadowrootmode><a href=#attr-template-shadowrootmode>shadowrootmode</a></code> —  Enables streaming declarative shadow roots
     <dd><code id=the-template-element:attr-template-shadowrootdelegatesfocus><a href=#attr-template-shadowrootdelegatesfocus>shadowrootdelegatesfocus</a></code> —  Sets <a id=the-template-element:delegates-focus href=https://dom.spec.whatwg.org/#shadowroot-delegates-focus data-x-internal=delegates-focus>delegates focus</a> on a declarative shadow root
     <dd><code id=the-template-element:attr-template-shadowrootclonable><a href=#attr-template-shadowrootclonable>shadowrootclonable</a></code> —  Sets <a id=the-template-element:clonable href=https://dom.spec.whatwg.org/#shadowroot-clonable data-x-internal=clonable>clonable</a> on a declarative shadow root
     <dd><code id=the-template-element:attr-template-shadowrootserializable><a href=#attr-template-shadowrootserializable>shadowrootserializable</a></code> —  Sets <span>serializable</span> on a declarative shadow root
     <dd><code id=the-template-element:attr-template-shadowrootcustomelementregistry><a href=#attr-template-shadowrootcustomelementregistry>shadowrootcustomelementregistry</a></code> —  Enables declarative shadow roots to indicate they will use a custom element registry
     <dt><a href=dom.html#concept-element-accessibility-considerations id=the-template-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-template>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-template>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-template-element:concept-element-dom>DOM interface</a>:<dd>Uses <code>HTMLTemplateElement</code>.</dl>

  <p>The <code id=the-template-element:the-template-element><a href=#the-template-element>template</a></code> element is used to declare fragments of HTML that can be cloned and
  inserted in the document by script.</p>

  <p>In a rendering, the <code id=the-template-element:the-template-element-2><a href=#the-template-element>template</a></code> element <a id=the-template-element:represents href=dom.html#represents>represents</a> nothing.</p>

  <p>The <dfn data-dfn-for=template id=attr-template-shadowrootmode data-dfn-type=element-attr><code>shadowrootmode</code></dfn> content attribute is an
  <a id=the-template-element:enumerated-attribute href=common-microsyntaxes.html#enumerated-attribute>enumerated attribute</a> with the following keywords and states:</p>

  <table><thead><tr><th>Keyword
     <th>State
     <th>Brief description
   <tbody><tr><td><dfn data-dfn-for=template/shadowrootmode id=attr-shadowrootmode-open data-dfn-type=attr-value><code>open</code></dfn>
     <td><dfn id=attr-shadowrootmode-open-state>Open</dfn>
     <td>The template element represents an open declarative shadow root.
    <tr><td><dfn data-dfn-for=template/shadowrootmode id=attr-shadowrootmode-closed data-dfn-type=attr-value><code>closed</code></dfn>
     <td><dfn id=attr-shadowrootmode-closed-state>Closed</dfn>
     <td>The template element represents a closed declarative shadow root.
  </table>

  <p>The <code id=the-template-element:attr-template-shadowrootmode-2><a href=#attr-template-shadowrootmode>shadowrootmode</a></code> attribute's <i id=the-template-element:invalid-value-default><a href=common-microsyntaxes.html#invalid-value-default>invalid value default</a></i> and <i id=the-template-element:missing-value-default><a href=common-microsyntaxes.html#missing-value-default>missing value default</a></i> are both the <dfn id=attr-shadowrootmode-none-state>None</dfn> state.</p>

  <p>The <dfn data-dfn-for=template id=attr-template-shadowrootdelegatesfocus data-dfn-type=element-attr><code>shadowrootdelegatesfocus</code></dfn> content
  attribute is a <a id=the-template-element:boolean-attribute href=common-microsyntaxes.html#boolean-attribute>boolean attribute</a>.</p>

  <p>The <dfn data-dfn-for=template id=attr-template-shadowrootclonable data-dfn-type=element-attr><code>shadowrootclonable</code></dfn> content attribute is a
  <a id=the-template-element:boolean-attribute-2 href=common-microsyntaxes.html#boolean-attribute>boolean attribute</a>.</p>

  <p>The <dfn data-dfn-for=template id=attr-template-shadowrootserializable data-dfn-type=element-attr><code>shadowrootserializable</code></dfn> content
  attribute is a <a id=the-template-element:boolean-attribute-3 href=common-microsyntaxes.html#boolean-attribute>boolean attribute</a>.</p>

  <p>The <dfn data-dfn-for=template id=attr-template-shadowrootcustomelementregistry data-dfn-type=element-attr><code>shadowrootcustomelementregistry</code></dfn>
  content attribute is a <a id=the-template-element:boolean-attribute-4 href=common-microsyntaxes.html#boolean-attribute>boolean attribute</a>.</p>

  <p>The <span>template contents</span> of a <code id=the-template-element:the-template-element-3><a href=#the-template-element>template</a></code> element <a href=syntax.html#template-syntax>are not children of the element itself</a>.</p>

  <p class=note>It is also possible, as a result of DOM manipulation, for a <code id=the-template-element:the-template-element-4><a href=#the-template-element>template</a></code>
  element to contain <code id=the-template-element:text><a data-x-internal=text href=https://dom.spec.whatwg.org/#interface-text>Text</a></code> nodes and element nodes; however, having any is a violation
  of the <code id=the-template-element:the-template-element-5><a href=#the-template-element>template</a></code> element's content model, since its content model is defined as <a href=dom.html#concept-content-nothing id=the-template-element:concept-content-nothing-2>nothing</a>.</p>

  <div id=template-example class=example><a href=#template-example class=self-link></a>

   <p>For example, consider the following document:</p>

   

   <pre><code class='html'><c- cp>&lt;!doctype html&gt;</c->
<c- p>&lt;</c-><c- f>html</c-> <c- e>lang</c-><c- o>=</c-><c- s>&quot;en&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>head</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>title</c-><c- p>&gt;</c->Homework<c- p>&lt;/</c-><c- f>title</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>body</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>template</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;template&quot;</c-><c- p>&gt;&lt;</c-><c- f>p</c-><c- p>&gt;</c->Smile!<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;&lt;/</c-><c- f>template</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>script</c-><c- p>&gt;</c->
   <c- a>let</c-> num <c- o>=</c-> <c- mf>3</c-><c- p>;</c->
   <c- a>const</c-> fragment <c- o>=</c-> document<c- p>.</c->getElementById<c- p>(</c-><c- t>&apos;template&apos;</c-><c- p>).</c->content<c- p>.</c->cloneNode<c- p>(</c-><c- kc>true</c-><c- p>);</c->
   <c- k>while</c-> <c- p>(</c->num<c- o>--</c-> <c- o>&gt;</c-> <c- mf>1</c-><c- p>)</c-> <c- p>{</c->
     fragment<c- p>.</c->firstChild<c- p>.</c->before<c- p>(</c->fragment<c- p>.</c->firstChild<c- p>.</c->cloneNode<c- p>(</c-><c- kc>true</c-><c- p>));</c->
     fragment<c- p>.</c->firstChild<c- p>.</c->textContent <c- o>+=</c-> fragment<c- p>.</c->lastChild<c- p>.</c->textContent<c- p>;</c->
   <c- p>}</c->
   document<c- p>.</c->body<c- p>.</c->appendChild<c- p>(</c->fragment<c- p>);</c->
  <c- p>&lt;/</c-><c- f>script</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>html</c-><c- p>&gt;</c-></code></pre>

   <p>The <code id=the-template-element:the-p-element><a href=grouping-content.html#the-p-element>p</a></code> element in the <code id=the-template-element:the-template-element-6><a href=#the-template-element>template</a></code> is <em>not</em> a child of the
   <code id=the-template-element:the-template-element-7><a href=#the-template-element>template</a></code> in the DOM; it is a child of the <code id=the-template-element:documentfragment><a data-x-internal=documentfragment href=https://dom.spec.whatwg.org/#interface-documentfragment>DocumentFragment</a></code> returned by
   the <code id=the-template-element:the-template-element-8><a href=#the-template-element>template</a></code> element's <code id=the-template-element:dom-template-content><a href=#dom-template-content>content</a></code> IDL
   attribute.</p>

   <p>If the script were to call <code id=the-template-element:dom-node-appendchild><a data-x-internal=dom-node-appendchild href=https://dom.spec.whatwg.org/#dom-node-appendchild>appendChild()</a></code> on the
   <code id=the-template-element:the-template-element-9><a href=#the-template-element>template</a></code> element, that would add a child to the <code id=the-template-element:the-template-element-10><a href=#the-template-element>template</a></code> element (as
   for any other element); however, doing so is a violation of the <code id=the-template-element:the-template-element-11><a href=#the-template-element>template</a></code> element's
   content model.</p>

  </div>

  <dl class=domintro><dt><code><var>template</var>.<span id=dom-template-content>content</span></code><dd><p>Returns the <span>template contents</span> (a <code id=the-template-element:documentfragment-2><a data-x-internal=documentfragment href=https://dom.spec.whatwg.org/#interface-documentfragment>DocumentFragment</a></code>).</dl>

  

  <div class=example>

   <p>In this example, a script populates a table four-column with data from a data structure, using
   a <code id=the-template-element:the-template-element-12><a href=#the-template-element>template</a></code> to provide the element structure instead of manually generating the
   structure from markup.</p>

   <pre><code class='html'><c- cp>&lt;!DOCTYPE html&gt;</c->
<c- p>&lt;</c-><c- f>html</c-> <c- e>lang</c-><c- o>=</c-><c- s>&apos;en&apos;</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>title</c-><c- p>&gt;</c->Cat data<c- p>&lt;/</c-><c- f>title</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>script</c-><c- p>&gt;</c->
 <c- c1>// Data is hard-coded here, but could come from the server</c->
 <c- a>var</c-> data <c- o>=</c-> <c- p>[</c->
   <c- p>{</c-> name<c- o>:</c-> <c- t>&apos;Pillar&apos;</c-><c- p>,</c-> color<c- o>:</c-> <c- t>&apos;Ticked Tabby&apos;</c-><c- p>,</c-> sex<c- o>:</c-> <c- t>&apos;Female (neutered)&apos;</c-><c- p>,</c-> legs<c- o>:</c-> <c- mf>3</c-> <c- p>},</c->
   <c- p>{</c-> name<c- o>:</c-> <c- t>&apos;Hedral&apos;</c-><c- p>,</c-> color<c- o>:</c-> <c- t>&apos;Tuxedo&apos;</c-><c- p>,</c-> sex<c- o>:</c-> <c- t>&apos;Male (neutered)&apos;</c-><c- p>,</c-> legs<c- o>:</c-> <c- mf>4</c-> <c- p>},</c->
 <c- p>];</c->
<c- p>&lt;/</c-><c- f>script</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>table</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>thead</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>th</c-><c- p>&gt;</c->Name <c- p>&lt;</c-><c- f>th</c-><c- p>&gt;</c->Color <c- p>&lt;</c-><c- f>th</c-><c- p>&gt;</c->Sex <c- p>&lt;</c-><c- f>th</c-><c- p>&gt;</c->Legs
 <c- p>&lt;</c-><c- f>tbody</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>template</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;row&quot;</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;&lt;</c-><c- f>td</c-><c- p>&gt;&lt;</c-><c- f>td</c-><c- p>&gt;&lt;</c-><c- f>td</c-><c- p>&gt;&lt;</c-><c- f>td</c-><c- p>&gt;</c->
  <c- p>&lt;/</c-><c- f>template</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>table</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>script</c-><c- p>&gt;</c->
 <c- a>var</c-> template <c- o>=</c-> document<c- p>.</c->querySelector<c- p>(</c-><c- t>&apos;#row&apos;</c-><c- p>);</c->
 <c- k>for</c-> <c- p>(</c-><c- a>var</c-> i <c- o>=</c-> <c- mf>0</c-><c- p>;</c-> i <c- o>&lt;</c-> data<c- p>.</c->length<c- p>;</c-> i <c- o>+=</c-> <c- mf>1</c-><c- p>)</c-> <c- p>{</c->
   <c- a>var</c-> cat <c- o>=</c-> data<c- p>[</c->i<c- p>];</c->
   <c- a>var</c-> clone <c- o>=</c-> template<c- p>.</c->content<c- p>.</c->cloneNode<c- p>(</c-><c- kc>true</c-><c- p>);</c->
   <c- a>var</c-> cells <c- o>=</c-> clone<c- p>.</c->querySelectorAll<c- p>(</c-><c- t>&apos;td&apos;</c-><c- p>);</c->
   cells<c- p>[</c-><c- mf>0</c-><c- p>].</c->textContent <c- o>=</c-> cat<c- p>.</c->name<c- p>;</c->
   cells<c- p>[</c-><c- mf>1</c-><c- p>].</c->textContent <c- o>=</c-> cat<c- p>.</c->color<c- p>;</c->
   cells<c- p>[</c-><c- mf>2</c-><c- p>].</c->textContent <c- o>=</c-> cat<c- p>.</c->sex<c- p>;</c->
   cells<c- p>[</c-><c- mf>3</c-><c- p>].</c->textContent <c- o>=</c-> cat<c- p>.</c->legs<c- p>;</c->
   template<c- p>.</c->parentNode<c- p>.</c->appendChild<c- p>(</c->clone<c- p>);</c->
 <c- p>}</c->
<c- p>&lt;/</c-><c- f>script</c-><c- p>&gt;</c-></code></pre>

   <p>This example uses <code id=the-template-element:dom-node-clonenode><a data-x-internal=dom-node-clonenode href=https://dom.spec.whatwg.org/#dom-node-clonenode>cloneNode()</a></code> on the
   <code id=the-template-element:the-template-element-13><a href=#the-template-element>template</a></code>'s contents; it could equivalently have used <code id=the-template-element:dom-document-importnode><a data-x-internal=dom-document-importnode href=https://dom.spec.whatwg.org/#dom-document-importnode>document.importNode()</a></code>, which does the same thing. The
   only difference between these two APIs is when the <a id=the-template-element:node-document href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a> is updated: with
   <code id=the-template-element:dom-node-clonenode-2><a data-x-internal=dom-node-clonenode href=https://dom.spec.whatwg.org/#dom-node-clonenode>cloneNode()</a></code> it is updated when the nodes are appended
   with <code id=the-template-element:dom-node-appendchild-2><a data-x-internal=dom-node-appendchild href=https://dom.spec.whatwg.org/#dom-node-appendchild>appendChild()</a></code>, with <code id=the-template-element:dom-document-importnode-2><a data-x-internal=dom-document-importnode href=https://dom.spec.whatwg.org/#dom-document-importnode>document.importNode()</a></code> it is updated when the nodes are
   cloned.</p>

  </div>



  



  <h4 id=the-slot-element><span class=secno>4.12.4</span> The <dfn data-dfn-type=element><code>slot</code></dfn> element<a href=#the-slot-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot title="The <slot> HTML element—part of the Web Components technology suite—is a placeholder inside a web component that you can fill with your own markup, which lets you create separate DOM trees and present them together.">Element/slot</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>63+</span></span><span class="safari yes"><span>Safari</span><span>10+</span></span><span class="chrome yes"><span>Chrome</span><span>53+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <dl class=element><dt><a href=dom.html#concept-element-categories id=the-slot-element:concept-element-categories>Categories</a>:<dd><a id=the-slot-element:flow-content-2 href=dom.html#flow-content-2>Flow content</a>.<dd><a id=the-slot-element:phrasing-content-2 href=dom.html#phrasing-content-2>Phrasing content</a>.<dt><a href=dom.html#concept-element-contexts id=the-slot-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>Where <a id=the-slot-element:phrasing-content-2-2 href=dom.html#phrasing-content-2>phrasing content</a> is expected.<dt><a href=dom.html#concept-element-content-model id=the-slot-element:concept-element-content-model>Content model</a>:<dd><a id=the-slot-element:transparent href=dom.html#transparent>Transparent</a><dt><a href=dom.html#concept-element-tag-omission id=the-slot-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>Neither tag is omissible.<dt><a href=dom.html#concept-element-attributes id=the-slot-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-slot-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dd><code id=the-slot-element:attr-slot-name><a href=#attr-slot-name>name</a></code> —  Name of shadow tree slot
     <dt><a href=dom.html#concept-element-accessibility-considerations id=the-slot-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-slot>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-slot>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-slot-element:concept-element-dom>DOM interface</a>:<dd>Uses <code>HTMLSlotElement</code>.</dl>

  <p>The <code id=the-slot-element:the-slot-element><a href=#the-slot-element>slot</a></code> element defines a <a href=https://dom.spec.whatwg.org/#concept-slot id=the-slot-element:concept-slot data-x-internal=concept-slot>slot</a>. It is
  typically used in a <a id=the-slot-element:shadow-tree href=https://dom.spec.whatwg.org/#concept-shadow-tree data-x-internal=shadow-tree>shadow tree</a>. A <code id=the-slot-element:the-slot-element-2><a href=#the-slot-element>slot</a></code> element <a id=the-slot-element:represents href=dom.html#represents>represents</a>
  its <a id=the-slot-element:assigned-nodes href=https://dom.spec.whatwg.org/#slot-assigned-nodes data-x-internal=assigned-nodes>assigned nodes</a>, if any, and its contents otherwise.</p>

  <p>The <dfn data-dfn-for=slot id=attr-slot-name data-dfn-type=element-attr><code>name</code></dfn> content
  attribute may contain any string value. It represents a <a href=https://dom.spec.whatwg.org/#concept-slot id=the-slot-element:concept-slot-2 data-x-internal=concept-slot>slot</a>'s
  <a href=https://dom.spec.whatwg.org/#slot-name id=the-slot-element:slot-name data-x-internal=slot-name>name</a>.</p>

  <p class=note>The <code id=the-slot-element:attr-slot-name-2><a href=#attr-slot-name>name</a></code> attribute is used to <a href=https://dom.spec.whatwg.org/#assign-a-slot id=the-slot-element:assign-a-slot data-x-internal=assign-a-slot>assign slots</a> to other elements: a <code id=the-slot-element:the-slot-element-3><a href=#the-slot-element>slot</a></code> element with a
  <code id=the-slot-element:attr-slot-name-3><a href=#attr-slot-name>name</a></code> attribute creates a named <a href=https://dom.spec.whatwg.org/#concept-slot id=the-slot-element:concept-slot-3 data-x-internal=concept-slot>slot</a> to which any element is <a href=https://dom.spec.whatwg.org/#assign-a-slot id=the-slot-element:assign-a-slot-2 data-x-internal=assign-a-slot>assigned</a> if that element has a <code id=the-slot-element:attr-slot><a href=dom.html#attr-slot>slot</a></code> attribute whose
  value matches that <code id=the-slot-element:attr-slot-name-4><a href=#attr-slot-name>name</a></code> attribute's value, and the
  <code id=the-slot-element:the-slot-element-4><a href=#the-slot-element>slot</a></code> element is a child of the <a id=the-slot-element:shadow-tree-2 href=https://dom.spec.whatwg.org/#concept-shadow-tree data-x-internal=shadow-tree>shadow tree</a> whose <a id=the-slot-element:root href=https://dom.spec.whatwg.org/#concept-tree-root data-x-internal=root>root</a>'s
  <a href=https://dom.spec.whatwg.org/#concept-documentfragment-host id=the-slot-element:concept-documentfragment-host data-x-internal=concept-documentfragment-host>host</a> has that corresponding <code id=the-slot-element:attr-slot-2><a href=dom.html#attr-slot>slot</a></code> attribute value.</p>

  <dl class=domintro><dt><code><var>slot</var>.<span id=dom-slot-name>name</span></code><dd>Can be used to get and set <var>slot</var>'s <a href=https://dom.spec.whatwg.org/#slot-name id=the-slot-element:slot-name-2 data-x-internal=slot-name>name</a>.<dt><code><var>slot</var>.<a href=#dom-slot-assignednodes-2 id=dom-slot-assignednodes>assignedNodes</a>()</code><dd>Returns <var>slot</var>'s <a id=the-slot-element:assigned-nodes-2 href=https://dom.spec.whatwg.org/#slot-assigned-nodes data-x-internal=assigned-nodes>assigned nodes</a>.<dt><code><var>slot</var>.<a href=#dom-slot-assignednodes-2 id=the-slot-element:dom-slot-assignednodes-2>assignedNodes</a>({ flatten: true })</code><dd>Returns <var>slot</var>'s <a id=the-slot-element:assigned-nodes-3 href=https://dom.spec.whatwg.org/#slot-assigned-nodes data-x-internal=assigned-nodes>assigned nodes</a>, if any, and <var>slot</var>'s children
   otherwise, and does the same for any <code id=the-slot-element:the-slot-element-5><a href=#the-slot-element>slot</a></code> elements encountered therein, recursively,
   until there are no <code id=the-slot-element:the-slot-element-6><a href=#the-slot-element>slot</a></code> elements left.<dt><code><var>slot</var>.<a href=#dom-slot-assignedelements-2 id=dom-slot-assignedelements>assignedElements</a>()</code><dd>Returns <var>slot</var>'s <a id=the-slot-element:assigned-nodes-4 href=https://dom.spec.whatwg.org/#slot-assigned-nodes data-x-internal=assigned-nodes>assigned nodes</a>, limited to elements.<dt><code><var>slot</var>.<a href=#dom-slot-assignedelements-2 id=the-slot-element:dom-slot-assignedelements-2>assignedElements</a>({ flatten: true })</code><dd>Returns the same as <code id=the-slot-element:dom-slot-assignednodes-2-2><a href=#dom-slot-assignednodes-2>assignedNodes({ flatten: true
   })</a></code>, limited to elements.<dt><code><var>slot</var>.<a href=#dom-slot-assign id=the-slot-element:dom-slot-assign>assign</a>(...<var>nodes</var>)</code><dd><p>Sets <var>slot</var>'s <a href=#manually-assigned-nodes id=the-slot-element:manually-assigned-nodes>manually assigned nodes</a> to the given
   <var>nodes</var>.</dl>

  <p>The <code id=the-slot-element:the-slot-element-7><a href=#the-slot-element>slot</a></code> element has <dfn data-dfn-for=HTMLSlotElement id=manually-assigned-nodes data-export="">manually assigned
  nodes</dfn>, which is an <a href=https://infra.spec.whatwg.org/#ordered-set id=the-slot-element:set data-x-internal=set>ordered set</a> of <a href=https://dom.spec.whatwg.org/#concept-slotable id=the-slot-element:slottable data-x-internal=slottable>slottables</a> set by <code id=the-slot-element:dom-slot-assign-2><a href=#dom-slot-assign>assign()</a></code>.
  This set is initially empty.</p>

  <p class=note>The <a href=#manually-assigned-nodes id=the-slot-element:manually-assigned-nodes-2>manually assigned nodes</a> set can be implemented using weak
  references to the <a href=https://dom.spec.whatwg.org/#concept-slotable id=the-slot-element:slottable-2 data-x-internal=slottable>slottables</a>, because this set is not
  directly accessible from script.</p>

  <p>The <dfn data-dfn-for=HTMLSlotElement id=dom-slot-assignednodes-2 data-dfn-type=method><code>assignedNodes(<var>options</var>)</code></dfn> method steps
  are:</p>

  <ol><li><p>If <var>options</var>["<code>flatten</code>"] is
   false, then return <a id=the-slot-element:this href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a id=the-slot-element:assigned-nodes-5 href=https://dom.spec.whatwg.org/#slot-assigned-nodes data-x-internal=assigned-nodes>assigned nodes</a>.<li><p>Return the result of <a id=the-slot-element:finding-flattened-slottables href=https://dom.spec.whatwg.org/#find-flattened-slotables data-x-internal=finding-flattened-slottables>finding flattened slottables</a> with
   <a id=the-slot-element:this-2 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>.</ol>

  <p>The <dfn data-dfn-for=HTMLSlotElement id=dom-slot-assignedelements-2 data-dfn-type=method><code>assignedElements(<var>options</var>)</code></dfn> method
  steps are:</p>

  <ol><li><p>If <var>options</var>["<code>flatten</code>"] is
   false, then return <a id=the-slot-element:this-3 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a id=the-slot-element:assigned-nodes-6 href=https://dom.spec.whatwg.org/#slot-assigned-nodes data-x-internal=assigned-nodes>assigned nodes</a>, filtered to contain only
   <code id=the-slot-element:element><a data-x-internal=element href=https://dom.spec.whatwg.org/#interface-element>Element</a></code> nodes.<li><p>Return the result of <a id=the-slot-element:finding-flattened-slottables-2 href=https://dom.spec.whatwg.org/#find-flattened-slotables data-x-internal=finding-flattened-slottables>finding flattened slottables</a> with <a id=the-slot-element:this-4 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>,
   filtered to contain only <code id=the-slot-element:element-2><a data-x-internal=element href=https://dom.spec.whatwg.org/#interface-element>Element</a></code> nodes.</ol>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLSlotElement/assign title="The assign() method of the HTMLSlotElement interface sets the slot's manually assigned nodes to an ordered set of slottables. The manually assigned nodes set is initially empty until nodes are assigned using assign().">HTMLSlotElement/assign</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>92+</span></span><span class="safari yes"><span>Safari</span><span>16.4+</span></span><span class="chrome yes"><span>Chrome</span><span>86+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>86+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><p>The <dfn data-dfn-for=HTMLSlotElement id=dom-slot-assign data-dfn-type=method><code>assign(...<var>nodes</var>)</code></dfn> method steps are:</p>

  <ol><li><p><a href=https://infra.spec.whatwg.org/#list-iterate id=the-slot-element:list-iterate data-x-internal=list-iterate>For each</a> <var>node</var> of <a id=the-slot-element:this-5 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s
   <a href=#manually-assigned-nodes id=the-slot-element:manually-assigned-nodes-3>manually assigned nodes</a>, set <var>node</var>'s <a id=the-slot-element:manual-slot-assignment href=https://dom.spec.whatwg.org/#slottable-manual-slot-assignment data-x-internal=manual-slot-assignment>manual slot assignment</a>
   to null.<li><p>Let <var>nodesSet</var> be a new <a href=https://infra.spec.whatwg.org/#ordered-set id=the-slot-element:set-2 data-x-internal=set>ordered set</a>.<li>
    <p><a href=https://infra.spec.whatwg.org/#list-iterate id=the-slot-element:list-iterate-2 data-x-internal=list-iterate>For each</a> <var>node</var> of <var>nodes</var>:</p>

    <ol><li><p>If <var>node</var>'s <a id=the-slot-element:manual-slot-assignment-2 href=https://dom.spec.whatwg.org/#slottable-manual-slot-assignment data-x-internal=manual-slot-assignment>manual slot assignment</a> refers to a <a href=#the-slot-element id=the-slot-element:the-slot-element-8>slot</a>,
     then remove <var>node</var> from that <a href=#the-slot-element id=the-slot-element:the-slot-element-9>slot</a>'s
     <a href=#manually-assigned-nodes id=the-slot-element:manually-assigned-nodes-4>manually assigned nodes</a>.<li><p>Set <var>node</var>'s <a id=the-slot-element:manual-slot-assignment-3 href=https://dom.spec.whatwg.org/#slottable-manual-slot-assignment data-x-internal=manual-slot-assignment>manual slot assignment</a> to <a id=the-slot-element:this-6 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>.<li><p><a href=https://infra.spec.whatwg.org/#set-append id=the-slot-element:set-append data-x-internal=set-append>Append</a> <var>node</var> to <var>nodesSet</var>.</ol>
   <li><p>Set <a id=the-slot-element:this-7 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#manually-assigned-nodes id=the-slot-element:manually-assigned-nodes-5>manually assigned nodes</a> to
   <var>nodesSet</var>.<li><p>Run <a id=the-slot-element:assign-slottables-for-a-tree href=https://dom.spec.whatwg.org/#assign-slotables-for-a-tree data-x-internal=assign-slottables-for-a-tree>assign slottables for a tree</a> for <a id=the-slot-element:this-8 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s
   <a id=the-slot-element:root-2 href=https://dom.spec.whatwg.org/#concept-tree-root data-x-internal=root>root</a>.</ol>


  <nav><a href=interactive-elements.html>← 4.11 Interactive elements</a> — <a href=./>Table of Contents</a> — <a href=canvas.html>4.12.5 The canvas element →</a></nav>
